在前端项目中,有时会需要通知、提示一些信息给用户,尤其是在后台系统中,操作的正确与否,都需要给与用户一些信息。
  
  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插件的更多相关文章

  1. toast插件的简单封装(样式适用pc后台管理系统的场景)

    直接分三个步骤吧: 1.手写一个toast.vue组件 <template> <transition name="toast-fade"> <div ...

  2. vue简单插件

    已经很久没有学习新的相关知识,对于今后的学习方向可能会集中在vue的源码,render,jsx语法,服务端渲染来学习,巩固好vue的基础和高级的知识,现阶段vue的api和基本用法已经全部掌握,但是还 ...

  3. 从零开始搭建一个简单的基于webpack的vue开发环境

    原文地址:https://segmentfault.com/a/1190000012789253?utm_source=tag-newest 从零开始搭建一个简单的基于webpack的react开发环 ...

  4. 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)

    写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...

  5. VUE常用UI组件插件及框架

    UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...

  6. vue.js国际化vue-i18n插件的使用问题,在模版文本、组件方法、jsf方法里的使用

    vue.js国际化vue-i18n插件的使用问题,在模版文本.组件方法.jsf方法里的使用 1.在文本里使用{{$t("xxx")}} <span>{{$t(" ...

  7. vue全局使用axios插件请求ajax

    vue全局使用axios插件请求ajax Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方宣布停止更新vue-resource,并推 ...

  8. 使用jQuery.extend创建一个简单的选项卡插件

    选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...

  9. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

随机推荐

  1. ant + jmeter 自动化接口测试环境部署

    1.jdk下载安装 下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html 2.jmeter下载 jmeter官 ...

  2. QOS-基本拥塞管理机制(PQ CQ WFQ RTPQ)

    QOS-基本拥塞管理机制(PQ CQ WFQ RTPQ) 2018年7月7日    20:29 拥塞:是指当前供给资源相对于正常转发处理需要资源的不足,从而导致服务质量下降的一种现象 拥塞管理概述: ...

  3. (译)JavaScript 中的正则表达式(RegEx)实操——快速掌握正则表达式,伴有随手可练的例子————(翻译未完待续)

    (原文:https://blog.bitsrc.io/a-beginners-guide-to-regular-expressions-regex-in-javascript-9c58feb27eb4 ...

  4. dijkstra算法学习

    dijkstra算法学习 一.最短路径 单源最短路径:计算源点到其他各顶点的最短路径的长度 全局最短路径:图中任意两点的最短路径 Dijkstra.Bellman-Ford.SPFA求单源最短路径 F ...

  5. 剑指offer题目系列二

    本篇延续上一篇,介绍<剑指offer>第二版中的四个题目:从尾到头打印链表.用两个栈实现队列.旋转数组的最小数字.二进制中1的个数. 5.从尾到头打印链表 题目:输入一个链表的头结点,从尾 ...

  6. MyEclipse 上使用sping+hibernate+mysql

    以下为入门级别代码,高手请务见笑~ 我的MyEclipse 上spring最高版是3.* 而hibernate 最高版本是4.*     在做项目时用的都是最高版,于是代码写好之后调试报了个异常,居然 ...

  7. python2.7入门---文件I/O&简单用户交互

        这篇文章开始之前,我们先来看下python中的输出方法.最简单的输出方法是用print语句,你可以给它传递零个或多个用逗号隔开的表达式.此函数把你传递的表达式转换成一个字符串表达式,并将结果写 ...

  8. xshell怎样打印

    Xshell提供用本地打印机打印终端窗口文本的功能.在Xshell打印时可以沿用终端窗口使用的字体及颜色.且在页面设置对话框可以设置打印纸的边距. 如何设置打印纸的大小和方向: 1.打开xshell ...

  9. Android面试收集录 2D绘图与动画技术

    1.如何在Android应用程序的窗口上绘制图形? 继承View 实现View中的onDraw()方法 2.如何绘制圆,空心椭圆? canvas.drawArc或canvas.drawCircle方法 ...

  10. c# string.format和tostring()

    字符 说明 示例 输出 C 货币 string.Format("{0:C3}", 2) $2.000 D 十进制 string.Format("{0:D3}", ...