从零开始实现Vue简单的Toast插件


Posted in Javascript onDecember 03, 2018

前言

一直都觉得vue的插件生涩难懂,但是又很好奇,在看了几篇文章,试着写了写之后觉得也没那么难,本文主要实现一个简单的Toast插件,方便迁移到不同的项目中,用来全局提示、警告一些信息。

概述:

在前端项目中,有时会需要通知、提示一些信息给用户,尤其是在后台系统中,操作的正确与否,都需要给与用户一些信息。

1. 实例

在Vue组件的methods内,调用如下代码

this.$toast({
 content: "可自动关闭",
 autoClose: true
})

在页面的右侧会出现一个Toast弹框,多次点击时,会依照顺序进行显示,并且Toast可自动关闭,具体效果如图。

从零开始实现Vue简单的Toast插件

代码地址:Github UI-Library

2. 原理

代码结构

将Toast插件分为两个部分:

  • Toast组件本身,包含本身的dom结构以及data,并在其生命周期完成在页面中的挂载与销毁;
  • 在组件外构建一层代理并提供相关方法用于调用、并控制多个Toast在页面中显示的顺序。

Toast方法

为了能够通过this.$toast({...})调用Toast组件,须在Vue的prototype上添加一个方法,如下

let instances = []
let initIndex = 0
Vue.prototype.$toast = (options = {}) => {
 /* 创建一个Toast组件的实例 */
 let instance = generateInstance(options)
 /* 将单个toast存入队列中 */ 
 instances.push(instance)
}

当调用该方法时,通过generateInstance创建一个Toast组件的实例,并将其放入instances,统一管理。

/* 构造单个toast */
const ToastConstructor = Vue.extend(Toast)
const verticalOffset = 16
function generateInstance(options) {
 // 利用ToastConstructor创建一个Toast的实例
 let instance = new ToastConstructor({
 propsData: options
 }).$mount(document.createElement('div'))
 if (typeof options.onClose === 'function') instance.onClose = options.onClose
 //计算instance verticalOffset
 let id = 'toast_' + initIndex++
 instance.id = id
 // 初始化Toast在空间中的垂直偏移量
 instance.verticalOffset = initVerticalOffset(instance.position)
 //监听组件close
 instance.$once('toastClose', function () {
 const curInstance = this
 // 当Toast组件关闭时,重新计算垂直方向的偏移量
 updateVerticalOffset(curInstance)
 typeof curInstance.onClose === 'function' && curInstance.onClose()
 })
 return instance;
}

generateInstance函数中,首先利用ToastConstructor构造函数创建一个Toast组件的实例,并通过propsData传入属性值,同时通过$mount(document.createElement('div'))渲染该组件。

ToastConstructor是通过Vue.extend创造Toast组件的构造函数,关于这部分的具体原理,可以参考
基于Vue构造器创建Form组件的通用解决方案。

/* 初始化每个toast对象在页面中的垂直属性 */
function initVerticalOffset(position) {
 // 筛选同一方向的Toast组件
 let typeInstances = instances.filter(item => item.position === position)
 // 计算偏移量
 return typeInstances.reduce((sum, elem) => 
  (elem.$el.offsetHeight + sum + verticalOffset), 
  verticalOffset)
}

之后当某个Toast关闭时,需要更新所有Toast实例在页面中偏移量

/* 更新每个toast对象在页面中的垂直属性 */
function updateVerticalOffset(removeInstance) {
 let index = 0
 let removeHeight = removeInstance.verticalOffset
 instances.find((elem, i) => {
 if (elem.id === removeInstance.id) index = i
 })
 // 删除关闭的Toast组件
 instances.splice(index, 1)
 // 更新在删除位置之后的组件的位置
 for (; index < instances.length; ++index) {
 if (instances[index].position === removeInstance.position) {
  [instances[index].verticalOffset, removeHeight] = 
  [removeHeight, instances[index].verticalOffset]
 }
 }
}

以上完成了Toast组件的创建、如何在页面中初始化、更新的位置。

Toast组件

组件的功能比较简单,只需要展示信息,以及具备自动关闭、手动关闭两个功能,属性也要包括Toast的类型、位置、内容等。

组件的生命周期

let instance = new ToastConstructor({
 propsData: options
}).$mount(document.createElement('div'))

当Toast组件$mount调用时,会触发mounted的生命周期

mounted() {
 // 挂载Toast在页面中
 document.body.appendChild(this.$el);
 // 需要自动关闭时,调用startTimer
 if (this.autoClose) this.startTimer();
},
beforeDestroy() {
 this.stopTimer();
 this.$el.removeEventListener("transitionend", this.destroyElement);
},
destroyed() {
 // 注销
 this.$el.parentNode.removeChild(this.$el);
}

自动关闭

需要自动时,就要在利用setTimeout完成该功能,并在注销时clearTimeout掉,防止泄露。

startTimer() {
 if (this.duration > 0) {
 this.timer = setTimeout(() => {
  if (!this.closed) {
  this.close();
  }
 }, this.duration);
 }
},
stopTimer() {
 if (this.timer) clearTimeout(this.timer);
}

3. 使用

进一步将其封装成Vue的插件

export default {
 install (Vue) {
 Vue.prototype.$toast = (options = {}) => {...}
 }
}

并且对所需要传入的必需属性,做处理异常处理

export default {
 install (Vue) {
 Vue.prototype.$toast = (options = {}) => {...}
 }
}

4. 总结
通过封装一个Toast插件,提取不同业务之间公共的部分,减少业务的工作量。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript中创建对象的三种常用方法
Dec 30 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 Javascript
使用NestJS开发Node.js应用的方法
Dec 03 #Javascript
写gulp遇到的ES6问题详解
Dec 03 #Javascript
使用mpvue搭建一个初始小程序及项目配置方法
Dec 03 #Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 #Javascript
koa2实现登录注册功能的示例代码
Dec 03 #Javascript
react-router 路由切换动画的实现示例
Dec 03 #Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 #Javascript
You might like
咖啡语言
2021/03/03 咖啡文化
PHP session会话的安全性分析
2011/09/08 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
php中数组最简单的使用方法
2020/12/27 PHP
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
原生js实现放大镜组件
2021/01/22 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
Python3实现转换Image图片格式
2018/06/21 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
如何用python免费看美剧
2020/08/11 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
汽车销售求职自荐信
2013/10/01 职场文书
建筑个人求职信范文
2014/01/25 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
玄武湖导游词
2015/02/05 职场文书
教师节慰问信
2015/02/15 职场文书
廉政承诺书2015
2015/04/28 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
找规律教学反思
2016/02/23 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
Python操作CSV格式文件的方法大全
2021/07/15 Python
springboot读取resources下文件的方式详解
2022/06/21 Java/Android