3、Vue.extend实现信息弹窗插件（el）

新建一个popBox.vue

新建一个popBox.js

import Vue from 'vue'
import PopBox from './popBox.vue'
 
// Vue.extend返回一个实例创建的构造器，但实例构造器需要进行挂载到页面中
let popBox = Vue.extend(PopBox)   
 
popBox.install = (vue, text) => {
      
        // 在body中动态创建一个div元素，之后此div将会替换成整个vue文件的内容
        // 此时的popBoxDom通俗讲就是相当于是整个组件对象，通过对象调用属性的方法来进行组件中数据的使用
        let popBoxDom = new popBox({
            el: document.createElement('div')
        })
 
        
        // 可以通过$el属性来访问创建的组件实例
        document.body.appendChild(popBoxDom.$el)
 
   
        // 将需要传入的文本内容传给组件实例
        popBoxDom.text = text;
 
        // 返回一个promise，进行异步操作，成功时返回，失败时返回
        return new Promise((res, rej) => {     
            popBoxDom.show = () => {   
                res()   //正确时返回的操作
                popBoxDom.flag = false;
            }
 
            popBoxDom.hide = ()=>{
                rej()   //失败时返回的操作
                popBoxDom.flag = false;
            }
        }
 
        vue.prototype.$popBox = popBox    
    })
}
 
// 将逻辑函数进行导出和暴露
export default popBox

页面使用

import PopBox from './popBox.js'
 
Vue.use(popBOx);
 
 
this.$popBox({
      title:'标题',
      msg:'内容',
      btn:{ ok:'确定', no:'取消'}
}).then(()=>{
      console.log('ok')
}).catch(()=>{
      console.log('no')
})

其他

import toastCom from "./Toast";
 
const toast = {};
toast.install = vue => {
 const ToastCon = vue.extend(toastCom);
 const ins = new ToastCon();
 ins.$mount(document.createElement("div"));
 document.body.appendChild(ins.$el);
 console.log(ins.toast)
 vue.prototype.$toast = ins.toast;
};
 
 
 
const globalComponent = {
 install: function(Vue) {
   Vue.use(toast);
 }
};
 
export default globalComponent;