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


Posted in Javascript onMarch 31, 2019

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

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

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等等,很大程度上提高了开发效率

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
Vue.js 踩坑记之双向绑定
May 03 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
vue监听用户输入和点击功能
Sep 27 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 #Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 #Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 #Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 #jQuery
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 #Javascript
使用post方法实现json往返传输数据的方法
Mar 30 #Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 #Javascript
You might like
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
js加解密 脚本解密
2008/02/22 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
从vue源码看props的用法
2019/01/09 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
wxPython 入门教程
2008/10/07 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
python如何删除文件、目录
2020/06/23 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
市场营销专科应届生求职信
2013/11/24 职场文书
护士的岗位职责
2013/12/04 职场文书
英语系本科生求职信范文
2013/12/18 职场文书
高中英语教学反思
2014/02/04 职场文书
南湾猴岛导游词
2015/02/09 职场文书
Python Matplotlib绘制条形图的全过程
2021/10/24 Python
Django框架之路由用法
2022/06/10 Python