Vue2-Vue.extend实现MessageBox-简易版

使用 Vue.extend 实现 messageBox 的步骤如下：

（1）创建 MessageBox 子类构造器：通过 Vue.extend 方法创建一个 MessageBox 的子类构造器，该子类继承自 Vue，并且可以用来创建 MessageBox 的实例。在子类构造器中定义了模板、数据和方法，用于渲染和控制 MessageBox 的显示和交互。

（2）定义 messageBox 函数：使用箭头函数定义了一个名为 messageBox 的函数，该函数接收消息、标题和配置作为参数，并返回一个 Promise 对象。在这个函数内部，创建了一个回调函数，根据用户操作的结果进行 resolve 或 reject 。然后使用之前创建的 MessageBox 子类构造器创建了一个实例，并传入相应的数据和配置。

1# 创建 MessageBox 子类构造器

const MessageBoxConstructor = Vue.extend({
    template: `
        <div class="message-box">
            <h2>{{ title }}</h2>
            <p>{{ message }}</p>
            <button @click="confirm">确定</button>
            <button @click="cancel">取消</button>
        </div>
    `,
    data() {
      return {
        title: '',
        message: ''
      };
    },
    methods: {
      confirm() { this.$emit('confirm'); },
      cancel() { this.$emit('cancel'); }
    }
});

2# 定义messageBox函数

const messageBox = (message, title, config) => {
    return new Promise((resolve, reject) => {
        const instance = new MessageBoxConstructor({
            data: {
                title: title,
                message: message
            },
            methods: {
                confirm() {
                    resolve('confirmed');
                    instance.$destroy();
                },
                cancel() {
                    reject('cancelled');
                    instance.$destroy();
                }
            }
        });
        instance.$mount();
        document.body.appendChild(instance.$el);
    });
};

// 调用示例
messageBox('这是一个提示信息', '提示', {})
    .then(response => {
        console.log('用户点击了确定按钮', response);
    })
    .catch(error => {
        console.log('用户点击了取消按钮', error);
    });