使用Vue.extend实现对于提示框组件的封装

首先根据业务需求，我们可能会遇到一个全局的提示框组件，有可能在封装axios中的js文件中使用，有可能需要在vue文件中使用，这时我们就能用到了Vue.extend拓展实例构造器，来完成这件事，具体步骤如下: 首先需要的是一个vue组件，和一个管vue组件的js文件 vue组件省略 js文件内容详解 import Message from './message'; import Vue from 'vue';

// 参数是一个包含组件选项的对象 const MessageConstructor = Vue.extend(Message); // console.log(MessageConstructor, "MessageConstructor"); var mg; export default options => { return new Promise((resolve, reject) => { if (mg) { // 销毁mg 与Dom的关联 mg.$destroy(); document.body.removeChild(document.querySelector('.message')); }

    mg = new MessageConstructor({
        el: document.createElement('div'),
        data: options
    });
    console.log(mg.$el, "mg.$el")
    document.body.appendChild(mg.$el);

    mg.ok = () => {
        resolve();
        mg.visible = false;
    };

    mg.close = () => {
        reject();
        mg.visible = false;
    };
});

};