从零开始实现Vue简单的Toast插件
在前端项目中,有时会需要通知、提示一些信息给用户,尤其是在后台系统中,操作的正确与否,都需要给与用户一些信息。
1. 实例
在Vue组件的methods内,调用如下代码
`this``.$toast({`=
`content:` `"可自动关闭"``,`
`autoClose:` `true`
`})`
在页面的右侧会出现一个Toast弹框,多次点击时,会依照顺序进行显示,并且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(www.wanmeiyuele.cn``this``.$el);`
`// 需要自动关闭时,调用startTimer`
`if` `(``this``.autoClose)` `this``.startTimer();`
`},`
`beforeDestroy() {`
`this``.stopTimer(www.michenggw.com);`
`this``.$el.removeEventListener(``"transitionend"``,` `this``.destroyElement);`
`},`
`destroyed() {`
`// 注销`
`this``.$el.parentNode.removeChild(``this``.$el);`
`}`
自动关闭
需要自动时,就要在利用setTimeout完成该功能,并在注销时clearTimeout掉,防止泄露。
`startTimer() {`
`if` `(`yongshiyule178.com/ `this``.duration > 0) {`
`this``.timer = setTimeout(() => {`
`if` `(!``this`www.mcyllpt.com/ `.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 = {}) => {...}`
`}`
`}`
总结
通过封装一个Toast插件,提取不同业务之间公共的部分,减少业务的工作量。
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值
本次给大家推荐一个交流圈,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入:582735936,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。
从零开始实现Vue简单的Toast插件的更多相关文章
- toast插件的简单封装(样式适用pc后台管理系统的场景)
直接分三个步骤吧: 1.手写一个toast.vue组件 <template> <transition name="toast-fade"> <div ...
- vue简单插件
已经很久没有学习新的相关知识,对于今后的学习方向可能会集中在vue的源码,render,jsx语法,服务端渲染来学习,巩固好vue的基础和高级的知识,现阶段vue的api和基本用法已经全部掌握,但是还 ...
- 从零开始搭建一个简单的基于webpack的vue开发环境
原文地址:https://segmentfault.com/a/1190000012789253?utm_source=tag-newest 从零开始搭建一个简单的基于webpack的react开发环 ...
- 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
- VUE常用UI组件插件及框架
UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...
- vue.js国际化vue-i18n插件的使用问题,在模版文本、组件方法、jsf方法里的使用
vue.js国际化vue-i18n插件的使用问题,在模版文本.组件方法.jsf方法里的使用 1.在文本里使用{{$t("xxx")}} <span>{{$t(" ...
- vue全局使用axios插件请求ajax
vue全局使用axios插件请求ajax Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方宣布停止更新vue-resource,并推 ...
- 使用jQuery.extend创建一个简单的选项卡插件
选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...
- Vue简单基础 + 实例 及 组件通信
vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
随机推荐
- ant + jmeter 自动化接口测试环境部署
1.jdk下载安装 下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html 2.jmeter下载 jmeter官 ...
- QOS-基本拥塞管理机制(PQ CQ WFQ RTPQ)
QOS-基本拥塞管理机制(PQ CQ WFQ RTPQ) 2018年7月7日 20:29 拥塞:是指当前供给资源相对于正常转发处理需要资源的不足,从而导致服务质量下降的一种现象 拥塞管理概述: ...
- (译)JavaScript 中的正则表达式(RegEx)实操——快速掌握正则表达式,伴有随手可练的例子————(翻译未完待续)
(原文:https://blog.bitsrc.io/a-beginners-guide-to-regular-expressions-regex-in-javascript-9c58feb27eb4 ...
- dijkstra算法学习
dijkstra算法学习 一.最短路径 单源最短路径:计算源点到其他各顶点的最短路径的长度 全局最短路径:图中任意两点的最短路径 Dijkstra.Bellman-Ford.SPFA求单源最短路径 F ...
- 剑指offer题目系列二
本篇延续上一篇,介绍<剑指offer>第二版中的四个题目:从尾到头打印链表.用两个栈实现队列.旋转数组的最小数字.二进制中1的个数. 5.从尾到头打印链表 题目:输入一个链表的头结点,从尾 ...
- MyEclipse 上使用sping+hibernate+mysql
以下为入门级别代码,高手请务见笑~ 我的MyEclipse 上spring最高版是3.* 而hibernate 最高版本是4.* 在做项目时用的都是最高版,于是代码写好之后调试报了个异常,居然 ...
- python2.7入门---文件I/O&简单用户交互
这篇文章开始之前,我们先来看下python中的输出方法.最简单的输出方法是用print语句,你可以给它传递零个或多个用逗号隔开的表达式.此函数把你传递的表达式转换成一个字符串表达式,并将结果写 ...
- xshell怎样打印
Xshell提供用本地打印机打印终端窗口文本的功能.在Xshell打印时可以沿用终端窗口使用的字体及颜色.且在页面设置对话框可以设置打印纸的边距. 如何设置打印纸的大小和方向: 1.打开xshell ...
- Android面试收集录 2D绘图与动画技术
1.如何在Android应用程序的窗口上绘制图形? 继承View 实现View中的onDraw()方法 2.如何绘制圆,空心椭圆? canvas.drawArc或canvas.drawCircle方法 ...
- c# string.format和tostring()
字符 说明 示例 输出 C 货币 string.Format("{0:C3}", 2) $2.000 D 十进制 string.Format("{0:D3}", ...