手把手走進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，鼓勵下個人努力