基于vue框架手写一个notify插件,实现通知功能
简单编写一个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项目可以看到,页面开始加载有一个弹出框,说明我们创建的插件调用成功
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
现在还有一个问题,我们不断点击的时候,会通知很多个组件,这显然不符合预期
解决的办法很简单,我们只要在执行之前判断是否已经存在了这个实例,如果存在直接返回不再继续,如果不存在,那么执行往后的逻辑
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插件,实现通知功能的更多相关文章
- 手写一个LRU工具类
LRU概述 LRU算法,即最近最少使用算法.其使用场景非常广泛,像我们日常用的手机的后台应用展示,软件的复制粘贴板等. 本文将基于算法思想手写一个具有LRU算法功能的Java工具类. 结构设计 在插入 ...
- 利用SpringBoot+Logback手写一个简单的链路追踪
目录 一.实现原理 二.代码实战 三.测试 最近线上排查问题时候,发现请求太多导致日志错综复杂,没办法把用户在一次或多次请求的日志关联在一起,所以就利用SpringBoot+Logback手写了一个简 ...
- 剖析手写Vue,你也可以手写一个MVVM框架
剖析手写Vue,你也可以手写一个MVVM框架# 邮箱:563995050@qq.com github: https://github.com/xiaoqiuxiong 作者:肖秋雄(eddy) 温馨提 ...
- 浅析MyBatis(二):手写一个自己的MyBatis简单框架
在上一篇文章中,我们由一个快速案例剖析了 MyBatis 的整体架构与整体运行流程,在本篇文章中笔者会根据 MyBatis 的运行流程手写一个自定义 MyBatis 简单框架,在实践中加深对 MyBa ...
- 教你如何使用Java手写一个基于链表的队列
在上一篇博客[教你如何使用Java手写一个基于数组的队列]中已经介绍了队列,以及Java语言中对队列的实现,对队列不是很了解的可以我上一篇文章.那么,现在就直接进入主题吧. 这篇博客主要讲解的是如何使 ...
- 放弃antd table,基于React手写一个虚拟滚动的表格
缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反 ...
- 看年薪50W的架构师如何手写一个SpringMVC框架
前言 做 Java Web 开发的你,一定听说过SpringMVC的大名,作为现在运用最广泛的Java框架,它到目前为止依然保持着强大的活力和广泛的用户群. 本文介绍如何用eclipse一步一步搭建S ...
- 【spring】-- 手写一个最简单的IOC框架
1.什么是springIOC IOC就是把每一个bean(实体类)与bean(实体了)之间的关系交给第三方容器进行管理. 如果我们手写一个最最简单的IOC,最终效果是怎样呢? xml配置: <b ...
- 基于VUE框架 与 其他框架间的基本对比
基于VUE框架的基本描述 与 其他框架间的基本对比 2018-11-03 11:01:14 A B React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供 ...
随机推荐
- 3.在自己的bag上运行Cartographer ROS
1.验证自己的bag cartographer ROS提供了一个工具cartographer_rosbag_validate来自动分析包中的数据.在尝试调试cartographer之前运行这个工具. ...
- centos7 安装搜狗输入法
1.root权限,卸载 ibus : yum remove ibus 2.加入EPEL源 sudo yum install epel-release 3.添加mosquito-myrepo源 su ...
- Linux 第五天
网络命令 1)write 给在线用户发信息(需按Crtl+D保存结束,w命令可看在线用户) 语法:write 用户名 2)wall 发广播信息 英文原意:write all 语法:wall 信息 3) ...
- android 获取文本框回车输入
扫描头开启,并发送回车 txtUsername.setOnEditorActionListener(new OnEditorActionListener() { @Override public bo ...
- Postgresql之VACUUM和VACUUM FULL对比
VACUUM命令存在两种形式,VACUUM和VACUUM FULL,它们之间的区别见如下表格: 无VACUUM VACUUM VACUUM FULL 删除大量数据之后 只是将删除数据的状态置为已删除, ...
- 前端之js
简介: JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互,JavaScript是浏览器解释执行的 前端三大块 ...
- ESP32作为接入点AP
作为接入点的第一个任务是使用esp_wifi_set_mode()函数设置ESP32 函数并传递请求,作为接入点,可以把ESP32设置为AP或者APSTA,即 esp_wifi_set_mode(WI ...
- Java并发编程:CountDownLatch、CyclicBarrier和 Semaphore
原文出处: 海子 在java 1.5中,提供了一些非常有用的辅助类来帮助我们进行并发编程,比如CountDownLatch,CyclicBarrier和Semaphore,今天我们就来学习一下这三个辅 ...
- Tomcat 多项目部署方法整理
Tomcat 多项目部署方法整理 说明:tomcat-deploy-aaa和tomcat-deploy-bbb是两个不同的web项目,为了方便以下简称aaa和bbb,请先自行创建并跑通 导航: NO1 ...
- [数据清洗]-Pandas 清洗“脏”数据(一)
概要 准备工作 检查数据 处理缺失数据 添加默认值 删除不完整的行 删除不完整的列 规范化数据类型 必要的转换 重命名列名 保存结果 更多资源 Pandas 是 Python 中很流行的类库,使用它可 ...