Vue2 + Js

• 第一步：创建组件(cumDialog.vue)

// cumDialog.vue
<template>
  <el-dialog :visible.sync="dialogHint" :before-close="handleClose">
    <h2>{{title}}</h2>
    <p>{{message}}</p>
    <el-button type="info" @click="hintFalse">{{cancelText}}</el-button>
    <el-button type="warning" @click="hintTrue">{{confirmText}}</el-button>
  </el-dialog>
</template>
<script>
export default {
  props:{
    title:{
      type:String,
      default:'提示'
    },
    message:{
      type:String,
      default:'自定义全局弹框组件js调用'
    },
    confirmText:{
      type:String,
      default:'关闭'
    },
    cancelText:{
      type:String,
      default:'确定'
    },
    onConfirm:{
      type:Function,
      default:()=>{}
    },
    onCancel:{
      type:Function,
      default:()=>{}
    }
  },
  data(){
    return {
      dialogHint:true
    }
  },
  methods:{
    hintTrue() {
      this.dialogHint = false;
      this.onConfirm();
    },
    hintFalse() {
      this.dialogHint = false;
      this.onCancel();
    },
    handleClose(done) {
      this.hintFalse();
      done();
    },
  }
}
</script>

• 第二步：创建cumdialog.js文件注册组件并添加自定义工具函数

// cumdialog.js
import Vue from "vue";
import cumDialog from "@/components/cumDialog.vue";
const conponent = Vue.extend(cumDialog );
function cumdialog(propsData){
  return new Promise((resolve, reject) => {
    propsData.onConfirm = ()=>{
      destroy()
      resolve()
    };
    propsData.onCancel = ()=>{
      destroy();
      reject();
    };
    function destroy(){
      instance.$destroy()
      document.body.removeChild(this.instance.$el);
    }
    const instance = new conponent({ propsData }).$mount();
    document.body.appendChild(this.instance.$el);
  })
}
export default cumdialog;

• 第三步：调用工具函数

// App.vue
<template>
  <div>
    <el-button @click="openDialog">打开</el-button>
  </div>
</template>
<script>
import cumdialog from "@/components/cumDialog.js";
export default {
  methods:{
    openDialog() {
      cumdialog({
        title:"测试"
      }).then(()=>{
        console.log('确定')
      }).catch(()=>{
        console.log('关闭')
      })
    }
  }
}
</script>

Vue3 + Ts

• 第一步：创建组件(cumDialog.vue)

// cumDialog.vue
<template>
  <div class="cumdialog">
    <el-dialog v-model="dialogHint" :before-close="handleClose">
      <h2>{{props.title}}</h2>
      <p>{{props.message}}</p>
      <el-button type="info" @click="hintFalse">{{props.confirmText}}</el-button>
      <el-button type="warning" @click="hintTrue">{{props.cancelText}}</el-button>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ElDialog,ElButton } from 'element-plus';
const props = defineProps({
  title:{
    type:String,
    default:'提示'
  },
  message:{
    type:String,
    default:'自定义全局弹框组件js调用'
  },
  confirmText:{
    type:String,
    default:'关闭'
  },
  cancelText:{
    type:String,
    default:'确定'
  },
  onConfirm:{
    type:Function,
    default:()=>{}
  },
  onCancel:{
    type:Function,
    default:()=>{}
  }
});

const dialogHint = ref(true);
function hintTrue() {
  dialogHint.value = false;
  props.onConfirm();
}
function hintFalse() {
  dialogHint.value = false;
  props.onCancel();
}
function handleClose() {
  hintFalse();
}
</script>

• 第二步：创建cumdialog.ts文件注册组件并添加自定义工具函数

// cumdialog.ts
import { createApp,App } from 'vue'
import cumDialog from "@/components/cumDialog.vue";

interface propsData {
  title?: string
  message?: string
  confirmText?: string
  cancelText?: string
  onConfirm?: Function
  onCancel?: Function
}

function unmount(app: App, node: Element) {
  app.unmount();
  document.body.removeChild(node);
}

function cumdialog(propsData: propsData) {
  return new Promise((resolve, reject) => {
    propsData.onConfirm = () => {
      unmount(instance, parentNode);
      resolve(true)
    };
    propsData.onCancel = () => {
      unmount(instance, parentNode);
      reject(false);
    };

    const parentNode = document.createElement('div');
    const instance = createApp(cumDialog, { ...propsData });
    instance.mount(parentNode);
    document.body.appendChild(parentNode);

  });
}
export default cumdialog;;

• 第三步：调用工具函数

// App.vue
<template>
  <div>
    <el-button @click="openDialog">打开</el-button>
  </div>
</template>
<script lang="ts" setup>
import cumdialog from "@/components/cumDialog.ts";
function openDialog(){
  cumdialog({
    title:'哈哈'
  }).then(res=>{
    console.log(res)
  }).catch(res=>{
    console.log(res)
  })
}
</script>

PS：如有不对之处，请指出，谢谢。