從零實現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