从零实现Vue的组件库（一）-Toast 实现

实现一个简单的Toast插件，方便迁移到不同的项目中，用来全局提示、警告一些信息。

Toast

概述： 在前端项目中，有时会需要通知、提示一些信息给用户，尤其是在后台系统中，操作的正确与否，都需要给与用户一些信息。

1. 实例

在Vue组件的methods内，调用如下代码

在页面的右侧会出现一个Toast弹框，多次点击时，会依照顺序进行显示，并且Toast可自动关闭，具体效果如图。

实例地址：http://fatge.xyz/blog/juejin-example-3#/Toast

代码地址：https://github.com/FatGe/UI-Library/tree/master/src/components/toast

2. 原理

• 代码结构
• 将Toast插件分为两个部分：
• Toast组件本身，包含本身的dom结构以及data，并在其生命周期完成在页面中的挂载与销毁；
• 在组件外构建一层代理并提供相关方法用于调用、并控制多个Toast在页面中显示的顺序。
• Toast方法
• 为了能够通过this.$toast({...})调用Toast组件，须在Vue的prototype上添加一个方法，如下

在Vue的prototype上添加一个方法

• 当调用该方法时，通过generateInstance创建一个Toast组件的实例，并将其放入instances，统一管理。

通过generateInstance创建一个Toast组件的实例，并将其放入instances

• generateInstance函数中，首先利用ToastConstructor构造函数创建一个Toast组件的实例，并通过propsData传入属性值，同时通过$mount(document.createElement('div'))渲染该组件。
• ToastConstructor是通过Vue.extend创造Toast组件的构造函数，关于这部分的具体原理，可以参考 基于Vue构造器创建Form组件的通用解决方案。
• initVerticalOffset函数计算Toast组件的初始偏移量

初始化每个toast对象在页面中的垂直属性

• 之后当某个Toast关闭时，需要更新所有Toast实例在页面中偏移量

更新每个toast对象在页面中的垂直属性

• 以上完成了Toast组件的创建、如何在页面中初始化、更新的位置。
• Toast组件
• 组件的功能比较简单，只需要展示信息，以及具备自动关闭、手动关闭两个功能，属性也要包括Toast的类型、位置、内容等。
• 组件的生命周期

• 当Toast组件$mount调用时，会触发mounted的生命周期

当Toast组件$mount调用时，会触发mounted的生命周期

• 自动关闭 需要自动时，就要在利用setTimeout完成该功能，并在注销时clearTimeout掉，防止泄露。

3. 使用

进一步将其封装成Vue的插件

进一步将其封装成Vue的插件

并且对所需要传入的必需属性，做处理异常处理

4. 总结

通过封装一个Toast插件，提取不同业务之间公共的部分，减少业务的工作量。

作者：FatGe