从头开始实现Vue简单的Toast插件

前言

总觉得vue的插件粗糙难懂，但又好奇。看了几篇文章，想写出来，感觉没那么难。本文主要实现了一个简单的Toast插件，方便迁移到不同的项目，用于全局提示和警告一些信息。

概述：

在前端项目中，有时需要用一些信息来通知和提示用户，尤其是在后台系统中，无论操作是否正确，都需要给用户一些信息。

1 .例子

在Vue组件的方法中，调用以下代码

这个。$Toast({ content: '可以自动关闭'，autoClose: true})会在页面右侧出现一个Toast弹出框，多次点击时会依次显示，Toast可以自动关闭，具体效果如图。

代码地址：Github UI-库

2.原则

代码结构

将吐司插件分成两部分：

Toast组件本身，包括它自己的dom结构和数据，在其生命周期中被挂载和销毁在页面中；在组件外部构建一个代理层，并提供相关方法来调用和控制页面上多个Toast的显示顺序。吐司法

以便通过这个调用Toast组件。$ toast({ 0.})，必须向Vue的原型添加一个方法，如下所示

让instance=[]让init index=0vue。原型。$ toast=(选项={})={/*创建Toast组件的实例*/let instance=generate instance(选项)/*在队列中保存单个Toast */instance . push(实例)}调用此方法时，通过generate instance创建一个Toast组件的实例，并将其放入实例中进行统一管理。

/*构造单个toast */const toast构造函数=vue.extend (toast) const垂直偏移量=16函数生成实例(选项){//使用toast构造函数创建toast的实例。让实例=新的Toast构造函数({propsdata : Options})。$ Mount(文档。create element(' div ')if(type of options . onclose==' function ')实例. onClose=options.onClose //计算实例垂直偏移量let id=' toast _ ' init '索引实例。id=id//初始化Toast在空间实例中的垂直偏移量。verticaloffset=initverticaloffset(实例。position)//侦听组件closeinstance。$ once ('toast close '，函数(){ Toast curinstance=this//重新计算curinstance的垂直偏移量updateverticaloffset(curinstance)类型。onclose==' function' curinstance。onclose ()})返回实例；}generateInstance函数，首先使用ToastConstructor构造函数创建一个Toast组件的实例，通过propsData传入属性值，通过$ mount(document . create element(' div ')渲染组件。

ToastConstructor是一个通过Vue扩展创建Toast组件的构造函数，具体原理请参考基于Vue构造函数创建Form组件的通用解决方案。

/*初始化页面中每个toast对象的垂直属性*/function initverticaloffset(position){//同方向过滤Toast组件让类型实例=instance . Filter(item=item . position===position)//计算返回类型实例的偏移量. reduce ((sum，Elem)=(elem)。$ El。offsetheight sum垂直偏移量)，垂直偏移量)}当Toast关闭时，需要更新页面中所有Toast实例的偏移量

/*更新页面中每个toast对象的垂直属性*/函数updateverticaloffset(remove instance){ let index=0 let remove height=remove instance . verticaloffset instances . find((elem，I)={if (elem。id==removeinstance。id)index=I })//删除关闭的Toast组件实例。split (index，1)//在删除位置后更新组件的位置为(；index instances.lengthindex){ if(instance[index])。position===remove instance . position){[instances[index]。verticalOffset，removeHeight]=[removeHeight，Instances [index]。VerticalOffset]}}}以上已经完成了Toast组件的创建，如何在页面中初始化，以及更新后的位置。

烤面包成分

该组件功能简单，只需显示信息，具有自动关闭和手动关闭两种功能。属性还包括吐司的类型、位置和内容。

组件的生命周期

Letinstance=新的Toast构造函数({propsdata:options})。$mount(文档。createelement ('div ')当调用toast组件$ mount时，将触发已挂载的生命周期

Mounted() {//在page document.body.appendchild中挂载Toast(这。$ El)；//调用starttimer if (this。autoclose)这个。需要自动关机时的start timer()；}，before destroy(){ this . stop timer()；这个。$ El . removeeventlistener(' transitionend '，this . DeskElement)；}，销毁了此的(){//注销。$ el.parentnode.removechild(这。$ El)；}自动关闭

当需要自动化时，需要使用setTimeout完成该功能，注销时使用clearTimeout防止泄露。

startTimer(){ if(this . duration 0){ this . timer=setTimeout(()={ if(！this . closed){ this . closed()；} }，this . duration)；}}，stop timer(){ if(this . timer)clear time out(this . timer)；}3.使用

它被进一步打包到Vue的插件中

导出默认的{install (vue) {vue。原型。$ toast=(options={ })={ 0.}}}并对需要传入的必需属性进行异常处理。

导出默认的{install (vue) {vue。原型。$ Toast=(选项={ })={ 0.}}} 4.总结一下，通过封装一个toast插件，我们可以提取不同服务之间的公共部分，减少服务的工作量。

好了，这就是本文的全部内容。希望本文的内容对你的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。