VUE3+ts开发弹出框插件

1.插件页面代码

2.TS代码（用于挂载dom以及挂载全局方法）

import { createVNode, VNode, render } from "vue";
import Toast from "./index.vue";
import type { App } from "vue";

export default {
  install(app: App, options: any) {
    // 将组件转换为虚拟DOM
    const Vnode: VNode = createVNode(Toast);
    // 将虚拟DOM挂载到页面节点上
    render(Vnode, document.body);
    // 将插件的主要方法挂载到 app.config.globalProperties 上，这里的 $toast 是自定义的
    app.config.globalProperties.$toast = {
      // 这里仅挂载了一个 show 方法到 $toast 上
      show(callback: Function) {
        Vnode.component?.exposed?.show(callback);
        app.provide("queryParams", "页面的数据,等待赋值");
      },
      hide() {
        Vnode.component?.exposed?.hide();
      }
    };
  },
};

3.main.js或者main.ts引入插件

//自定义插件 plugInUnit
import Dialog from '@/views/heming/dept'

app.use(Dialog) //自定义弹窗插件

4.使用自定义的插件