## 在原生、Vue 、React、Angular 中使用
npm install question-box
import 'cai-ui';
哈哈哈
哈哈哈
在最近的 Vue3 中,Vue 对 WebComponents 有了更好的支持。Vue 在 Custom Elements Everywhere 测试中获得了 100% 的完美分数。但是还需要我们做出如下配置:
跳过 Vue 本身对组件的解析
custom Elements 的风格和 Vue 组件很像,导致 Vue 会把自定义(非原生的 HTML 标签)标签解析并注册为一个 Vue 组件,然后解析失败才会再解析为一个自定义组件,这样会消耗一定的性能并且会在控制台警告,因此我们需要在构建工具中跳过这个解析:
``js
// vite.config.js
import vue from "@vitejs/plugin-vue";
export default {
plugins: [
vue({
template: {
compilerOptions: {
// 将所有包含短横线的标签作为自定义元素处理
isCustomElement: (tag) => tag.includes("-"),
},
},
}),
],
};
`
组件的具体使用方法和 Vue 2x 类似。
`js
import React, { useEffect, useRef, useState } from "react";
import "cai-ui";
function App() {
const [type, setType] = useState("primary");
const [value, setValue] = useState();
const iptRef = useRef(null);
useEffect(() => {
document.getElementById("ipt").addEventListener("change", function (e) {
console.log(e);
});
}, []);
const handleClick = () => {
console.log(value);
setType("danger");
};
return (
export default App;
``
- Web Components 触发的事件可能无法通过 React 渲染树正确的传递。 你需要在 React 组件中手动添加事件处理器来处理这些事件。
- 在 React 使用有个点我们需要注意下,WebComponents 组件我们需要添加类时需要使用 claas 而不是 className