内容简介:实现一个简单的Toast插件,方便迁移到不同的项目中,用来全局提示、警告一些信息。概述: 在前端项目中,有时会需要通知、提示一些信息给用户,尤其是在后台系统中,操作的正确与否,都需要给与用户一些信息。在Vue组件的
实现一个简单的Toast插件,方便迁移到不同的项目中,用来全局提示、警告一些信息。
概述: 在前端项目中,有时会需要通知、提示一些信息给用户,尤其是在后台系统中,操作的正确与否,都需要给与用户一些信息。
1. 实例
在Vue组件的 methods
内,调用如下代码
this.$toast({ content: "可自动关闭", autoClose: true }) 复制代码
在页面的右侧会出现一个Toast弹框,多次点击时,会依照顺序进行显示,并且Toast可自动关闭,具体效果如图。
代码地址: Github UI-Library2. 原理
-
代码结构
将Toast插件分为两个部分:
data
-
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组件的通用解决方案 。initVerticalOffset
函数计算Toast组件的初始偏移量/* 初始化每个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 = {}) => {...} } } 复制代码
并且对所需要传入的必需属性,做处理异常处理
let requireProps = Object.keys(Toast.props) .filter((elem) => (Toast.props[elem].required)) requireProps.forEach((elem) => { if (!options[elem]) throw `err: options lack ${elem} prop` }) if ( options.type && !types.some(elem => elem === options.type) ) throw `err: toast not exist ${options.type} type` 复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Python插件机制实现
- 实现Vue表单验证插件
- Python实现SQL注入检测插件
- Rust 实现动态库加载和基于此功能实现的插件管理
- 用protobuf生成json结构插件实现
- 如何实现一行命令自动生成 Flutter 插件
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
C++ 程序设计语言(特别版)(英文影印版)
[美] Bjarne Stroustrup / 高等教育出版社 / 2001-8-1 / 55.00
《C++程序设计语言》(特别版)(影印版)作者是C++的发明人,对C++语言有着全面、深入的理解,因此他强调应将语言作为设计与编程的工具,而不仅仅是语言本身,强调只有对语言功能有了深入了解之后才能真正掌握它。《C++程序设计语言》编写的目的就是帮助读者了解C++是如何支持编程技术的,使读者能从中获得新的理解,从而成为一名优秀的编程人员和设计人员。一起来看看 《C++ 程序设计语言(特别版)(英文影印版)》 这本书的介绍吧!