learning-system-portal/src/utils/simpleMessageBox.js

import Vue from 'vue'
import MessageBox from '@/components/SimpleMessageBox/index.vue'

// 创建 MessageBox 构造器
const MessageBoxConstructor = Vue.extend(MessageBox)

let messageBoxInstance = null

const MessageBoxService = {
  open(options = {}) {
    // 如果已有实例，先销毁
    if (messageBoxInstance) {
      messageBoxInstance.$destroy()
      const el = messageBoxInstance.$el
      if (el && el.parentNode) {
        el.parentNode.removeChild(el)
      }
    }

    // 创建新实例
    messageBoxInstance = new MessageBoxConstructor({
      el: document.createElement('div'),
      data: options
    })

    // 挂载到 body
    document.body.appendChild(messageBoxInstance.$el)

    // 显示并返回 Promise
    return messageBoxInstance.open(options)
  },

  cancel() {
    messageBoxInstance.cancel()
  },

  confirm(options) {
    return this.open({
      ...options
    })
  },
}

// 添加到 Vue 原型
MessageBoxService.install = function (Vue) {
  Vue.prototype.$messageBox = MessageBoxService
}

// 导出
export default MessageBoxService