记录一次高端的全局弹窗封装，用起来真香！

elmentUI中MessageBox中confirm函数式调用非常之香，仿照其封装方式，封装了一个自己的全局弹窗组件，重点如下：

0）照常构建弹窗组件component；

1）Vue.extend（component）生成constructor

2）new这个 constructor生成一个instance实例

3）给instance传参，主要是props

4）利用$mount()将instance实例挂载到dom上

5）利用promise传递resolve函数，完成弹窗卡显

主要代码如下：

// 核心调用函数
import Vue from 'vue'
import UnConfirm from './index.vue'

export function UnConfirmJs( {subTitle, title, mainBtnName, subBtnName}) {
  return new Promise((resolve) => {
    const VN = Vue.extend(UnConfirm)
    const instance = new VN()

    instance.resolve = resolve
    instance.title = title || '操作提示'
    instance.subTitle = subTitle
    instance.mainBtnName = mainBtnName || '确定'
    instance.subBtnName = subBtnName || '取消'
    
    const div = document.createElement('div')
    document.body.appendChild(div)
    div.appendChild(instance.$mount().$el)

    const unmount = () => {
      document.body.removeChild(div)
    }

    instance.unmount = unmount
    
  })
}

// 弹窗内容组件
<template>
  <el-dialog
    :visible.sync="showDialog"
    append-to-body
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
  >
    <div class="un-confirm-wrap">
      <div class="title">
        {{ title }}
        <img :src="require('./assets/close.svg')" alt="pic" @click="handleClick(false)" />
      </div>
      <div class="sub-title">{{ subTitle }}</div>
      <div class="btns">
        <div class="cancel" @click="handleClick(false)">{{ subBtnName }}</div>
        <div class="confirm" @click="handleClick(true)">{{ mainBtnName }}</div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  title: String,
  subTitle: String,
  mainBtnName: {
    type: String,
    default: "确定",
  },
  subBtnName: {
    type: String,
    default: "取消",
  },
  resolve: Function,
  unmount: Function
});

const showDialog = ref(true);

const handleClick = (flag) => {
  showDialog.value = false;
  props.resolve(flag);
  props.unmount()
}

</script>

//具体使用代码
const flag = await UnConfirmJs({
    title: '操作提示',
    subTitle: '确定复制并编辑该故事？'
})
if(!flag) return

效果图：