从零开始实现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语句可以不以;结尾的烦恼
Mar 08 Javascript
jquery 3D球状导航的文章分类
Jul 06 Javascript
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
vue2.0实现列表数据增加和删除
Jun 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
实用函数2
2007/11/08 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
js异或加解密效果代码
2008/06/25 Javascript
JavaScript关于select的相关操作说明
2010/01/13 Javascript
Javascript计算时间差的函数分享
2011/07/04 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
基于python plotly交互式图表大全
2019/12/07 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
新西兰优惠网站:Treat Me
2019/07/04 全球购物
致铅球运动员加油稿
2014/02/13 职场文书
毕业设计说明书
2014/05/07 职场文书
2014年党委工作总结
2014/11/22 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
电台广播稿范文
2015/08/19 职场文书
银行服务理念口号
2015/12/25 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
python opencv通过4坐标剪裁图片
2021/06/05 Python
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android