vue3.0 实现elementPlus的MessageBox(确认框)组件并挂载到全局使用

notarizeBox.vue

<template>
  <div class="notarize-box">
    <div class="notarize-box-main">
      <div class="notarize-box-message">
        {{ message }}
      </div>
      <div class="notarize-box-footer">
        <button class="btn-primary" @click="onConfirm">确认</button>
        <button class="btn-danger" @click="onCancel">取消</button>
      </div>
    </div>
  </div>
</template>

<script setup  lang='ts'>
defineProps({
  title: {
    type: String,
    default: "",
  },
  message: {
    type: String,
    default: "",
  },
  onConfirm: {
    type: Function,
    default: () => {},
  },
  onCancel: {
    type: Function,
    default: () => {},
  },
});
</script>

<style scoped  lang="scss">
.notarize-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999999;

  .notarize-box-main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 4px;
    padding: 10px;
    max-width: 200px;

    .notarize-box-message {
      font-size: 10px;
      margin-bottom: 10px;
    }
    .btn-primary {
      margin-right: 10px;
    }
  }
}
</style>

notarizeBox.js

import {
    createVNode,
    render,
} from 'vue'

import notarizeBox from './index.vue'

const MessageBox = (message, onConfirm, onCancel) => {
    const container = document.createElement('div')
    document.body.appendChild(container)

    const vnode = createVNode(
        notarizeBox, {
            message,
            onConfirm: () => {
                onConfirm()
                handleClose()
            },
            onCancel: () => {
                onCancel()
                handleClose()
            },
        },
    )
    render(vnode, container)

    // 关闭并删除确认框
    function handleClose() {
        render(null, container)
        document.body.removeChild(container)
    }
}

export default MessageBox

---

使用方法一: 页面使用示例( 使用的页面单独引入js文件 )

import notarizeBox from "notarizeBox.js 路径";

notarizeBox("确定要删除吗？",
    () => {
        console.log('确认按钮点击事件');
    },
    () => {
        console.log('取消按钮点击事件');
    }
);

使用方法二: 挂在到全局使用

main.ts

import notarizeBox from  'notarizeBox.js 文件路径'
app.config.globalProperties.notarizeBox = notarizeBox;

使用页面

import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance() as any;

proxy.notarizeBox("确定要删除吗？",
    () => {
        console.log('确认按钮点击事件');
    },
    () => {
        console.log('取消按钮点击事件');
    }
);