基于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 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
JQuery CSS样式控制 学习笔记
Jul 23 Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 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
Wordpress php 分页代码
2009/10/21 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
利用Python校准本地时间的方法教程
2019/10/31 Python
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
个人简历自我评价八例
2013/10/31 职场文书
创先争优制度
2014/01/21 职场文书
仓管员岗位责任制
2014/02/19 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
公司更名通知函
2015/04/24 职场文书
2015年档案室工作总结
2015/05/23 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
防溺水主题班会教案
2015/08/12 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
Python 数据科学 Matplotlib图库详解
2021/07/07 Python