vue 定义全局方法打开弹窗

1、dialog.vue

2、dialog.ts

import Vue from "vue";
import CounterDialog from "./dialog.vue";

// 创建基于 CounterDialog 类的构造函数
const DialogConstructor = Vue.extend(CounterDialog);

/**
 * @param obj 设置默认的 data 数据
 * @returns 
 */
export const showDialogFn = (obj: any) => {
  return new Promise((resolve, reject) => {
    const dialogDom = new DialogConstructor({
      el: document.createElement("template"),
      data() {
        return {
          ...obj
        };
      }
    });
    // 改写回调函数，完成 promise 的状态修改
    dialogDom.callback = ({ action, data }) => {
      if (action === "confirm") {
        resolve(data);
      } else if (action === "cancel") {
        reject(data);
      }
    };
    document.body.appendChild(dialogDom.$el);
  });
};

3、引用或绑定全局

import Vue from "vue";
import { showDialogFn } from "./dialog.ts"
// 通过函数的方法打开弹窗
showDialogFn({
    text: "初始值",
    title: "说明"
}).then(res => {
console.log("res", res)
})

// 绑定到 vue 实例上
Vue.prototype.$showDialogFn = showDialogFn;