手把手走进toast,你也可以快速开发vue插件

什么是toast

在使用IOS、Android的APP时，经常会收到系统的一些简短的提示信息，在其显示1--3s后自动关闭。

分析toast

仔细分析toast，发现其有以下几个特点：

1. 内容简短，大多数就是一句话

2. 显示在固定且显目的位置

3. 没有关闭按钮

4. 1--3秒后自动关闭消失

开发思路

首先是HTML模板，根据以上分析的特点1，toast需要的DOM结构其实非常简单，如下：

div.toast
    i 显示的消息

以上是使用模板引擎pug，就是原来大家熟知的jade,后来因为商标名称而改名。因为其书写简单，所以我非常推荐大家使用。
闲言少赘，div的作用是显示一个纯色背景，引起用户注意，而消息内容则放置于i标签中。
接着我们为toast书写一个css关闭特效

.hidden {
    transform: scale(0);
    transition: 0.3s;
}

---

以上是css3两个属性，transform: scale(0)是缩小div的尺寸到0.即消失；transition: 0.3s则是表示该实现缩小过程的时间，这样就实现一个简单的动画效果。

---

说到这里，估计大家也明白，就是通过动态添加className来实现toast的消失，但是在怎么实现自动关闭的功能呢？

---

很简单，就是大家常用的setTimeout()方法，通过设置一个时间来告诉程序多少秒后给toast的div添加hidden的类名让其消失。  

---

然后可能有人疑问，这样虽然实现了toast的功能，但是创建的DOM结构还一直存在，我看着不舒服，想给它删掉，该怎么实现呢？  

---

这时候就要用到transitionend这个事件函数了，该事件的触发时机是使用transition属性的target动画特效结束后，具体可查询[mozilla文档][2]  

编写一个toast的vue插件

• toast组件

<tempalate lang="pug">
div.toast(:class="{'hidden': !visiable}")
    i {{message}}
</tempalate>
<script>
data () {
    return {
        message: '',
        visiable: true
    }
}
</script>
<style lang="scss">
...
</style>

---

组件很简单，就是使用vue的数据绑定，默认显示toast内容

---

接下来我们就要正式写vue的插件了，请注意

import Toast from './Toast.vue'

var plugin = {}

// 插件必须要有一个install方法
plugin.install = function (Vue, options = {}) {

    // 
    const ToastController = Vue.extend(Toast)
    // 实现toast的关闭方法
    ToastController.prototype.close = function () {
        this.visible = false
        this.$el.addEventListener('transitionend', removeDom)
    }
    
    // 在Vue原型实现toast的DOM挂载、以及功能实现
    // 用户可以在Vue实例（Vue单文件就是一个Vue实例）通过this.$toast来访问以下内容
    Vue.prototype.$toast = (option = {}) => {
         // toast实例挂载到刚创建的div
         var instance = new ToastController().$mount(document.createElement('div'))
         let duration = option.duration || options.duration || 2500
         // 如果用户在Vue实例中没有设置option的属性message,则直接将option的内容作为message信息进行toast内容进行显示
         instance.message = typeof option === 'string' ? option : option.message
         // 将toast的DOM挂载到body上
         document.body.appendChild(instance.$el)
         
         // 自动关闭功能的实现
         setTimeout(function () {
            instance.close()
        }, duration)
    }
}

// 最后将以上内容导出，即可在其他地方进行使用
export default plugin

接下来，你就可以在入口文件进行使用刚刚开发的插件啦
import Vue from 'vue'
import Toast from '../lib/plugin.js'

Vue.use(Toast)
就这样，不知不觉中就大功告成了，喝杯香槟庆祝吧

以下是我的toast源码地址，内置多种主题，且支持自定义样式，以及多toast同时显示，大家可以通过npm install v-awesome-toast --save来直接使用

Github: v-awesome-toast 点击查阅
欢迎大家指正缺陷，一块研究，更希望您能点个star，鼓励下我的努力