从零开始实现Vue简单的Toast插件
前言
一直都觉得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(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插件，提取不同业务之间公共的部分，减少业务的工作量。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。