Skip to content
  • Vue 在渲染阶段将模板编译为 AST,然后根据 AST 生成 render 函数,底层通过调用 render 函数会生成 VNode 创建虚拟 DOM

  • 弹窗

import { ELDialog } from 'element-plus';
import { createVNode, defineComponent, render } from 'vue';
const DialogComponent = defineComponent({
    props: {
        options: {
            type: Object
        }
    },
    setup(props, ctx) {
        const state = reactive({
            options : props.options,
            isShow: false,
        })
        ctx.expose({
            showDialog(options) {
                state.options = options;
                state.isShow = true;
            }
        })
        return () => {
            return <ELDialog v-model={state.isShow}></ELDialog>
        }
    }
})
let vNode;
export function $dialog(options) {
    if (!vNode) {
        let el = document.createElement('div');
        vNode = createVNode(DialogComponent, { options });
        document.body.appendChild((render(vNode, el), el));
    }
    const showDialog = vNode.component.exposed;
    showDialog(options)
}