从零开始实现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() 来劫 ...
随机推荐
- 配置Echarts大全
由于项目中需要用到Echarts,最近研究了一个星期.网上的教程也挺多的.磕磕碰碰的,难找到合适的例子.都说的马马虎虎.不废话了.开始. 这种上下排列的... 还有这种地图的.(如下) 还有就是配置的 ...
- pyqt4学习资料
官方文档: http://pyqt.sourceforge.net/Docs/PyQt4/classes.html 啄木鸟社区:https://wiki.woodpecker.org.cn/moin/ ...
- 20.2 解析与序列化【JavaScript高级程序设计第三版】
JSON 之所以流行,拥有与JavaScript 类似的语法并不是全部原因.更重要的一个原因是,可以把JSON 数据结构解析为有用的JavaScript 对象.与XML 数据结构要解析成DOM 文档而 ...
- python mac下安装虚拟环境
Mac 下 Flask 框架 workon命令找不到 ---- 最终解决方案(详解具体实现操作过程中遇到的坑) Mac 下 Flask 的 全网最详细搭建 1.安装virtualenv和virtual ...
- 5-sql语句
1 [oracle@ocp ~]$ . oraenv # ORACLE_SID = [oracle] ? orcl The Oracle base has been set to /u01/app/o ...
- Java:static的作用分析
static表示“静态”或者“全局”的意思,但在Java中不能在所有类之外定义全局变量,只能通过在一个类中定义公用.静态的变量来实现一个全局变量. 一.静态变量 1. Java中存在两种变量,一种是s ...
- Oracle 完全理解connect by-详细脚本-可实战
狒狒Q971751392 未来星开发团队--狒狒(QQ:9715234) oracle树查询的最重要的就是select…start with…connect by…prior语法了.依托于该语法,我们 ...
- jmeter处理响应结果中文乱码
1. 在线程下面添加后置处理器BeanShell PostProcessor,增加script:prev.setDataEncoding("UTF-8"); 2. 在jmeter. ...
- 『Golang』MongoDB在Golang中的使用(mgo包)
有关在Golang中使用mho进行MongoDB操作的最简单的例子.
- 自学MVC开发基础
由于现在面试需求,我必须有点了解MVC开发基础,MVC是一个开发框架或者是一个开发模式,MVC让软件开发的过程大致切割成三个单元,分别是:Model(模型).View(试图).Controller(控 ...