背景

项目中有很多的弹窗，可以使用vue3中的jsx，统一加载销毁

安装

在vite.config.js中

import vueJsx from "@vitejs/plugin-vue-jsx";

...
plugins: [
    vueJsx({}),
],
...

a.jsx

创建 a.jsx

注意点

1. onClick
2. withModifiers
3. render 里面就跟react一样的，写习惯了，就感觉还挺舒服的

import {
  defineComponent,
  withModifiers,
  ref,
  onBeforeUpdate,
  toRaw,
  unref,
} from "vue";
// 这里文件名必须是带module
import styled from "./a.module.scss";

export default defineComponent({
    props: {
    },
    setup(props, { slots }) {
        const closeOnly = () => {
        
        }
        return {
            closeOnly
        }
    },
    // 关键
    render() {
        // 类名
        const { w_60, w_50 } = styled;
        return (
            <div
                className="popup_content"
                onClick={withModifiers(this.closeOnly, ["self"])}
              >
              <div className={`popup ${w_50}`}></div>
              <div className={w_60}></div>
              abc
              </div>
        )
    }
});

render

import aComponent from './a.jsx';

const propsData = {
    a: '1',
    onRemove: removeComponent,
}
const parent = document.createElement('div');

const app = createApp(aComponent, propsData);
app.use(xxx);

const instance = app.mount(parent);
/* 组件卸载 */
function removeComponent() {
    // 卸载应用实例的根组件
    app.unmount();
}
/* 组件挂载到DOM中 */
document.querySelector(id).appendChild(instance.$el);