基于vue框架手写一个notify插件实现通知功能的方法

发布时间：2020-09-16 11:49:50 作者：唐吉sir
来源：脚本之家阅读：241

简单编写一个vue插件，当点击时触发notify插件，dom中出现相应内容并且在相应时间之后清除，我们可以在根组件中设定通知内容和延迟消失时间。

1. 基础知识

我们首先初始化一个vue项目，删除不需要的组件和样式，主要针对src下一些初始化资源，有过vue项目基础的应该很容易理解，如果没有vue基础建议先熟悉每个初始化文件的作用。

关于vue中如何开发插件可以直接看vue官方文档，简单了解插件开发过程，vue插件文档。

现在我们在src目录下新建一个plugin文件夹，里面存放要开发的插件notify.js

// notify.js
let notify = {  //需要在此对象拥有一个install 方法

};
notify.install = function () {
  alert('tangj')
}
// 导出这个对象，如果使用Vue.use()就会自动调用install方法
export default notify;

然后在main函数导入这个模块并使用

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

运行这个vue项目可以看到，页面开始加载有一个弹出框，说明我们创建的插件调用成功

基于vue框架手写一个notify插件实现通知功能的方法

2. notify.js主要功能

上面我们知道了，Vue.use()会自动调用install方法，install第一个参数为Vue构造函数，第二个参数即为输入的内容，默认undefined，所以我们在调用一开始的时候为Vue这个构造函数的原型上添加一个$notify方法，此后，每一个Vue的实例都能调用这个方法，这样我们就可以通过给根组件绑定一个点击事件，让$notify执行。

当然这样还是不够的，回到开头说的，根组件可以设定通知内容和通知延迟时间，相当于给this.$notify传递两个参数，第一个是通知内容，第二个是延迟时间。

因此，原型上的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}; //用自己调用插件时传递过来的属性覆盖默认设置的值
    let v = Vue.extend(modal); //返回的是一个构造函数的子类，参数是包含组件选项的对象
    let vm = new v;
    let oDiv = document.createElement('div'); //创建一个div将实例挂载到元素上
    vm.$mount(oDiv);
    vm.value = message;
    document.body.appendChild(vm.$el);
    setTimeout(()=>{ //根据delay将dom元素移除
      document.body.removeChild(vm.$el);
    },options.delay) 
  }
}
// 导出这个对象，如果使用Vue.use()就会自动调用install方法
export default notify;

3. 完善notify.js

现在还有一个问题，我们不断点击的时候，会通知很多个组件，这显然不符合预期

基于vue框架手写一个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) 
  }
}

最后

这是很简单的一个vue插件写法，我们可以用这种思维创造很多有用的插件，比如vue-router、vue-awesome-swiper等等，很大程度上提高了开发效率

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持亿速云。

基于vue框架手写一个notify插件实现通知功能的方法

相关阅读