基于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 相关文章推荐
Javascript对象属性方法汇总
Nov 21 Javascript
JavaScript 作用域链解析
Nov 13 Javascript
jquery实现动态画圆
Dec 04 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 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
php mssql 数据库分页SQL语句
2008/12/16 PHP
php简单提示框alert封装函数
2010/08/08 PHP
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
PHP防CC攻击实现代码
2011/12/29 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
jquery 实现的全选和反选
2009/04/15 Javascript
JS 的应用开发初探(mootools)
2009/12/19 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
python实现的系统实用log类实例
2015/06/30 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
python对csv文件追加写入列的方法
2019/08/01 Python
python config文件的读写操作示例
2019/09/27 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
优纳科技软件测试面试题
2012/05/15 面试题
财务与信息服务专业推荐信
2013/11/28 职场文书
党员目标管理责任书
2014/07/25 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python