手把手走进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，鼓励下个人努力