基于vue框架手寫一個notify插件實現(xiàn)通知功能的方法

// notify.js
let notify = {  //需要在此對象擁有一個install 方法

};
notify.install = function () {
  alert('tangj')
}
// 導(dǎo)出這個對象，如果使用Vue.use()就會自動調(diào)用install方法
export default notify;

import notify from './plugin/notify.js'
Vue.use(notify)

import modal from './notify.vue'
let notify = {  //需要在此對象擁有一個install 方法

};
notify.install = function (Vue,options={delay:3000}) {    
  Vue.prototype.$notify = function (message,opt={}) {
    options = {...options,...opt}; //用自己調(diào)用插件時傳遞過來的屬性覆蓋默認(rèn)設(shè)置的值
    let v = Vue.extend(modal); //返回的是一個構(gòu)造函數(shù)的子類，參數(shù)是包含組件選項的對象
    let vm = new v;
    let oDiv = document.createElement('div'); //創(chuàng)建一個div將實例掛載到元素上
    vm.$mount(oDiv);
    vm.value = message;
    document.body.appendChild(vm.$el);
    setTimeout(()=>{ //根據(jù)delay將dom元素移除
      document.body.removeChild(vm.$el);
    },options.delay) 
  }
}
// 導(dǎo)出這個對象，如果使用Vue.use()就會自動調(diào)用install方法
export default notify;

notify.install = function (Vue,options={delay:3000}) {    
  Vue.prototype.$notify = function (message,opt={}) {
    if(notify.el)return;//判斷dom上是否存在這個實例
    options = {...options,...opt}; 
    let v = Vue.extend(modal); 
    let vm = new v;
    let oDiv = document.createElement('div'); 
    vm.$mount(oDiv);
    vm.value = message;
    document.body.appendChild(vm.$el);
    notify.el = vm.$el;   //把實例給notify對象    
    setTimeout(()=>{ 
      document.body.removeChild(vm.$el);
      notify.el = null; // 清空這個對象
    },options.delay) 
  }
}