Appearance
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)
}