只需编写一个vue插件。点击时会触发notify插件，相应的内容会出现在dom中，并在相应的时间后清除。我们可以在根组件中设置通知内容和延迟消失时间。

1.基础知识

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

关于如何在vue中开发插件，可以直接看vue的官方文档，简单了解一下插件开发流程和vue插件文档。

现在我们在src目录中创建了一个新的插件文件夹，其中存储了要开发的插件notify.js

//notify.jslet notify={//您需要在此对象上有一个安装方法}；通知。install=function(){ alert(' tangj ')}//导出此对象。如果使用Vue.use()，将自动调用安装方法导出默认通知。然后在主功能中导入这个模块并使用

从“”导入通知。/plugin/notify . js ' vue . use(notify)要运行这个vue项目，可以看到页面加载开始时会出现一个弹出框，表示我们创建的插件已经成功调用。

2.notify.js的主要功能

如上所述，Vue.use()将自动调用install方法。install的第一个参数是Vue构造函数，第二个参数是输入内容，默认不定义。因此，我们在调用开始时向Vue构造函数的原型添加一个$notify方法，然后Vue的每个实例都可以调用这个方法，这样我们就可以将一个click事件绑定到根组件上，使$notify

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

因此，原型上的notify函数必须接受两个参数。当有通知内容替换通知内容时，有延迟时间替换延迟时间。为了插件的完整性，请记住为参数设置默认值。

总结一下业务逻辑：当你点击页面的时候，一个通知内容会在一段延迟时间后出现又消失，所以我们可以导入一个模块，把模块挂载到页面上，在对应的延迟时间后再移除

从“”导入模式。/notify . vue ' let notify={//您需要在此对象上有一个安装方法}；notify.install=function (Vue，options={ delay :3000 }){ Vue . prototype . $ notify=function(message，opt={ }){ options=}.选项，opt }；//调用插件时用自己传递的属性覆盖let v=Vue.extend(modal)的默认值；//返回构造函数的子类，参数是包含组件选项的对象，让VM=new v；让OdiV=document . create element(' div ')；//创建一个div，将实例装载到元素虚拟机上。$ mount(OdiV)；vm.value=消息；document.body.appendChild(vm。$ El)；SetTimeout(()={ //根据延迟文档删除dom元素。尸体。RemoveChild (vm。$ El)；}，options.delay) }}//导出此对象。如果使用Vue.use()，将自动调用安装方法导出默认通知。3.改进notify.js

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

解决方法很简单。我们只需要在执行之前判断这个实例是否已经存在。如果存在，直接返回将不会继续，如果不存在，则执行以下逻辑

notify.install=function (Vue，options={ delay :3000 }){ Vue。原型。$ notify=函数(消息，opt={ }){ if(notify。El)返回；//判断数字正射影像图上是否存在这个实例选项={ 0.选项，opt }；让v=Vue.extend(模态);让vm=新五；让OdiV=文档。创建元素(' div ')；虚拟机$ mount(OdiV)；vm.value=消息；document.body.appendChild(vm .$ El)；notify.el=vm .$ el//把实例给通知对象setTimeout(()={ document。尸体。移除子项(虚拟机.$ El)；notify.el=null/清空这个对象}，options.delay) }}最后

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

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