import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    blockquote: "blockquote",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: ["Solid 通过 ", jsx(_components.code, {
        children: "use:"
      }), " 命名空间支持自定义指令。但这只是 ", jsx(_components.code, {
        children: "ref"
      }), " 一个有用的语法糖，类似于原生的绑定，并且可以在同一个元素上有多个绑定而不会发生冲突。这可以让我们更好地利用可重用 DOM 元素行为。"]
    }), "\n", jsxs(_components.p, {
      children: ["自定义指令只是形式为 ", jsx(_components.code, {
        children: "(element, valueAccesor)"
      }), " 的函数，其中 ", jsx(_components.code, {
        children: "valueAccessor"
      }), " 是一个获取绑定值的函数。只要函数是在作用域中导入的，你就可以通过 ", jsx(_components.code, {
        children: "use:"
      }), " 使用它。"]
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsxs(_components.p, {
        children: ["重要提示：", jsx(_components.code, {
          children: "use:"
        }), " 需要被编译器检测并进行转换，并且函数需要在作用域内，因此不能作为传值的一部分或在组件上使用。"]
      }), "\n"]
    }), "\n", jsxs(_components.p, {
      children: ["在这个例子中，我们将为点击外部行为制作一个简单的封装函数来关闭弹出窗口或模态框。首先，我们需要在我们的元素上导入并使用我们的 ", jsx(_components.code, {
        children: "clickOutside"
      }), " 指令。"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<div ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "class"
        }), "=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"modal\""
        }), " ", jsx(_components.span, {
          className: "hljs-attr",
          children: "use"
        }), ":clickOutside={", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setShow"
        }), "(", jsx(_components.span, {
          className: "hljs-literal",
          children: "false"
        }), ")}>\n  ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Some"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Modal"
        }), "\n</div>\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["打开 ", jsx(_components.code, {
        children: "click-outside.tsx"
      }), "，我们将在这里定义我们的自定义指令。该指令需要定义了一个单击事件处理程序，将其绑定到 body 并在需要时进行清理。"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "export"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "default"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "clickOutside"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "el, accessor"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "onClick"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "e"
        }), ") => !el.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "contains"
        }), "(e.", jsx(_components.span, {
          className: "hljs-property",
          children: "target"
        }), ") && ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "accessor"
        }), "()?.();\n  ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "body"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "addEventListener"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"click\""
        }), ", onClick);\n\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "onCleanup"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "body"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "removeEventListener"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"click\""
        }), ", onClick));\n}\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "现在你应该能够在打开和关闭模态框之间来回切换。"
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=lesson-1ab811d1.js.map
