從零開始實現(xiàn)Vue簡單的Toast插件
前言
一直都覺得vue的插件生澀難懂，但是又很好奇，在看了幾篇文章，試著寫了寫之后覺得也沒那么難，本文主要實現(xiàn)一個簡單的Toast插件，方便遷移到不同的項目中，用來全局提示、警告一些信息。
概述：
在前端項目中，有時會需要通知、提示一些信息給用戶，尤其是在后臺系統(tǒng)中，操作的正確與否，都需要給與用戶一些信息。
1. 實例
在Vue組件的methods內(nèi)，調(diào)用如下代碼
this.$toast({
content: "可自動關(guān)閉",
autoClose: true
})
在頁面的右側(cè)會出現(xiàn)一個Toast彈框，多次點擊時，會依照順序進行顯示，并且Toast可自動關(guān)閉，具體效果如圖。
代碼地址：Github UI-Library
2. 原理
代碼結(jié)構(gòu)
將Toast插件分為兩個部分：
- Toast組件本身，包含本身的dom結(jié)構(gòu)以及data，并在其生命周期完成在頁面中的掛載與銷毀；
- 在組件外構(gòu)建一層代理并提供相關(guān)方法用于調(diào)用、并控制多個Toast在頁面中顯示的順序。
Toast方法
為了能夠通過this.$toast({...})調(diào)用Toast組件，須在Vue的prototype上添加一個方法，如下
let instances = []
let initIndex = 0
Vue.prototype.$toast = (options = {}) => {
/* 創(chuàng)建一個Toast組件的實例 */
let instance = generateInstance(options)
/* 將單個toast存入隊列中 */
instances.push(instance)
}
當(dāng)調(diào)用該方法時，通過generateInstance創(chuàng)建一個Toast組件的實例，并將其放入instances，統(tǒng)一管理。
/* 構(gòu)造單個toast */
const ToastConstructor = Vue.extend(Toast)
const verticalOffset = 16
function generateInstance(options) {
// 利用ToastConstructor創(chuàng)建一個Toast的實例
let instance = new ToastConstructor({
propsData: options
}).$mount(document.createElement('div'))
if (typeof options.onClose === 'function') instance.onClose = options.onClose
//計算instance verticalOffset
let id = 'toast_' + initIndex++
instance.id = id
// 初始化Toast在空間中的垂直偏移量
instance.verticalOffset = initVerticalOffset(instance.position)
//監(jiān)聽組件close
instance.$once('toastClose', function () {
const curInstance = this
// 當(dāng)Toast組件關(guān)閉時，重新計算垂直方向的偏移量
updateVerticalOffset(curInstance)
typeof curInstance.onClose === 'function' && curInstance.onClose()
})
return instance;
}
generateInstance函數(shù)中，首先利用ToastConstructor構(gòu)造函數(shù)創(chuàng)建一個Toast組件的實例，并通過propsData傳入屬性值，同時通過$mount(document.createElement('div'))渲染該組件。
ToastConstructor是通過Vue.extend創(chuàng)造Toast組件的構(gòu)造函數(shù)，關(guān)于這部分的具體原理，可以參考
基于Vue構(gòu)造器創(chuàng)建Form組件的通用解決方案。
/* 初始化每個toast對象在頁面中的垂直屬性 */
function initVerticalOffset(position) {
// 篩選同一方向的Toast組件
let typeInstances = instances.filter(item => item.position === position)
// 計算偏移量
return typeInstances.reduce((sum, elem) =>
(elem.$el.offsetHeight + sum + verticalOffset),
verticalOffset)
}
之后當(dāng)某個Toast關(guān)閉時，需要更新所有Toast實例在頁面中偏移量
/* 更新每個toast對象在頁面中的垂直屬性 */
function updateVerticalOffset(removeInstance) {
let index = 0
let removeHeight = removeInstance.verticalOffset
instances.find((elem, i) => {
if (elem.id === removeInstance.id) index = i
})
// 刪除關(guān)閉的Toast組件
instances.splice(index, 1)
// 更新在刪除位置之后的組件的位置
for (; index < instances.length; ++index) {
if (instances[index].position === removeInstance.position) {
[instances[index].verticalOffset, removeHeight] =
[removeHeight, instances[index].verticalOffset]
}
}
}
以上完成了Toast組件的創(chuàng)建、如何在頁面中初始化、更新的位置。
Toast組件
組件的功能比較簡單，只需要展示信息，以及具備自動關(guān)閉、手動關(guān)閉兩個功能，屬性也要包括Toast的類型、位置、內(nèi)容等。
組件的生命周期
let instance = new ToastConstructor({
propsData: options
}).$mount(document.createElement('div'))
當(dāng)Toast組件$mount調(diào)用時，會觸發(fā)mounted的生命周期
mounted() {
// 掛載Toast在頁面中
document.body.appendChild(this.$el);
// 需要自動關(guān)閉時，調(diào)用startTimer
if (this.autoClose) this.startTimer();
},
beforeDestroy() {
this.stopTimer();
this.$el.removeEventListener("transitionend", this.destroyElement);
},
destroyed() {
// 注銷
this.$el.parentNode.removeChild(this.$el);
}
自動關(guān)閉
需要自動時，就要在利用setTimeout完成該功能，并在注銷時clearTimeout掉，防止泄露。
startTimer() {
if (this.duration > 0) {
this.timer = setTimeout(() => {
if (!this.closed) {
this.close();
}
}, this.duration);
}
},
stopTimer() {
if (this.timer) clearTimeout(this.timer);
}
3. 使用
進一步將其封裝成Vue的插件
export default {
install (Vue) {
Vue.prototype.$toast = (options = {}) => {...}
}
}
并且對所需要傳入的必需屬性，做處理異常處理
export default {
install (Vue) {
Vue.prototype.$toast = (options = {}) => {...}
}
}
4. 總結(jié)
通過封裝一個Toast插件，提取不同業(yè)務(wù)之間公共的部分，減少業(yè)務(wù)的工作量。
好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了Vue.js中observer模塊的相關(guān)資料，文中通過原理分析介紹還是相對的詳細，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-02-02
這篇文章主要介紹了詳解Vue CLI3配置解析之css.extract,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
Vue-Element-Admin集成自己的接口實現(xiàn)登錄跳轉(zhuǎn)
關(guān)于這個Vue-element-admin中的流程可能對于新的同學(xué)不是很友好，所以本文將結(jié)合實例代碼，介紹Vue-Element-Admin集成自己的接口實現(xiàn)登錄跳轉(zhuǎn)，感興趣的小伙伴們可以參考一下2021-06-06
element上傳組件循環(huán)引用及簡單時間倒計時的實現(xiàn)
這篇文章主要介紹了element上傳組件循環(huán)引用及簡單時間倒計時的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
Vue3導(dǎo)入Elementplus時組件無法加載的情況及解決
這篇文章主要介紹了Vue3導(dǎo)入Elementplus時組件無法加載的情況及解決方案,具有很好的參考價值,希望對大家有所幫助2024-03-03
這篇文章主要介紹了Vue組件之極簡的地址選擇器的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了vue中的v-if和v-show的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
在本篇文章里小編給大家整理的是一篇關(guān)于Vue3.0的優(yōu)化總結(jié)內(nèi)容，有需要的朋友們可以學(xué)習(xí)下。2020-10-10
Vue自定義組件實現(xiàn)?v-model?的幾種方式
在?Vue?中,v-model?是一個常用的指令,用于實現(xiàn)表單元素和組件之間的雙向綁定,當(dāng)我們使用原生的表單元素時,直接使用?v-model?是很方便的,本文給大家介紹了Vue自定義組件實現(xiàn)?v-model?的幾種方式,需要的朋友可以參考下2024-02-02
vue 全局封裝loading加載教程(全局監(jiān)聽)
這篇文章主要介紹了vue 全局封裝loading加載教程(全局監(jiān)聽)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11