從零開始實(shí)現(xiàn)Vue簡單的Toast插件
前言
一直都覺得vue的插件生澀難懂，但是又很好奇，在看了幾篇文章，試著寫了寫之后覺得也沒那么難，本文主要實(shí)現(xiàn)一個(gè)簡單的Toast插件，方便遷移到不同的項(xiàng)目中，用來全局提示、警告一些信息。
概述：
在前端項(xiàng)目中，有時(shí)會(huì)需要通知、提示一些信息給用戶，尤其是在后臺系統(tǒng)中，操作的正確與否，都需要給與用戶一些信息。
1. 實(shí)例
在Vue組件的methods內(nèi)，調(diào)用如下代碼
this.$toast({
content: "可自動(dòng)關(guān)閉",
autoClose: true
})
在頁面的右側(cè)會(huì)出現(xiàn)一個(gè)Toast彈框，多次點(diǎn)擊時(shí)，會(huì)依照順序進(jìn)行顯示，并且Toast可自動(dòng)關(guān)閉，具體效果如圖。
代碼地址：Github UI-Library
2. 原理
代碼結(jié)構(gòu)
將Toast插件分為兩個(gè)部分：
- Toast組件本身，包含本身的dom結(jié)構(gòu)以及data，并在其生命周期完成在頁面中的掛載與銷毀；
- 在組件外構(gòu)建一層代理并提供相關(guān)方法用于調(diào)用、并控制多個(gè)Toast在頁面中顯示的順序。
Toast方法
為了能夠通過this.$toast({...})調(diào)用Toast組件，須在Vue的prototype上添加一個(gè)方法，如下
let instances = []
let initIndex = 0
Vue.prototype.$toast = (options = {}) => {
/* 創(chuàng)建一個(gè)Toast組件的實(shí)例 */
let instance = generateInstance(options)
/* 將單個(gè)toast存入隊(duì)列中 */
instances.push(instance)
}
當(dāng)調(diào)用該方法時(shí)，通過generateInstance創(chuàng)建一個(gè)Toast組件的實(shí)例，并將其放入instances，統(tǒng)一管理。
/* 構(gòu)造單個(gè)toast */
const ToastConstructor = Vue.extend(Toast)
const verticalOffset = 16
function generateInstance(options) {
// 利用ToastConstructor創(chuàng)建一個(gè)Toast的實(shí)例
let instance = new ToastConstructor({
propsData: options
}).$mount(document.createElement('div'))
if (typeof options.onClose === 'function') instance.onClose = options.onClose
//計(jì)算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)閉時(shí)，重新計(jì)算垂直方向的偏移量
updateVerticalOffset(curInstance)
typeof curInstance.onClose === 'function' && curInstance.onClose()
})
return instance;
}
generateInstance函數(shù)中，首先利用ToastConstructor構(gòu)造函數(shù)創(chuàng)建一個(gè)Toast組件的實(shí)例，并通過propsData傳入屬性值，同時(shí)通過$mount(document.createElement('div'))渲染該組件。
ToastConstructor是通過Vue.extend創(chuàng)造Toast組件的構(gòu)造函數(shù)，關(guān)于這部分的具體原理，可以參考
基于Vue構(gòu)造器創(chuàng)建Form組件的通用解決方案。
/* 初始化每個(gè)toast對象在頁面中的垂直屬性 */
function initVerticalOffset(position) {
// 篩選同一方向的Toast組件
let typeInstances = instances.filter(item => item.position === position)
// 計(jì)算偏移量
return typeInstances.reduce((sum, elem) =>
(elem.$el.offsetHeight + sum + verticalOffset),
verticalOffset)
}
之后當(dāng)某個(gè)Toast關(guān)閉時(shí)，需要更新所有Toast實(shí)例在頁面中偏移量
/* 更新每個(gè)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組件
組件的功能比較簡單，只需要展示信息，以及具備自動(dòng)關(guān)閉、手動(dòng)關(guān)閉兩個(gè)功能，屬性也要包括Toast的類型、位置、內(nèi)容等。
組件的生命周期
let instance = new ToastConstructor({
propsData: options
}).$mount(document.createElement('div'))
當(dāng)Toast組件$mount調(diào)用時(shí)，會(huì)觸發(fā)mounted的生命周期
mounted() {
// 掛載Toast在頁面中
document.body.appendChild(this.$el);
// 需要自動(dòng)關(guān)閉時(shí)，調(diào)用startTimer
if (this.autoClose) this.startTimer();
},
beforeDestroy() {
this.stopTimer();
this.$el.removeEventListener("transitionend", this.destroyElement);
},
destroyed() {
// 注銷
this.$el.parentNode.removeChild(this.$el);
}
自動(dòng)關(guān)閉
需要自動(dòng)時(shí)，就要在利用setTimeout完成該功能，并在注銷時(shí)clearTimeout掉，防止泄露。
startTimer() {
if (this.duration > 0) {
this.timer = setTimeout(() => {
if (!this.closed) {
this.close();
}
}, this.duration);
}
},
stopTimer() {
if (this.timer) clearTimeout(this.timer);
}
3. 使用
進(jìn)一步將其封裝成Vue的插件
export default {
install (Vue) {
Vue.prototype.$toast = (options = {}) => {...}
}
}
并且對所需要傳入的必需屬性，做處理異常處理
export default {
install (Vue) {
Vue.prototype.$toast = (options = {}) => {...}
}
}
4. 總結(jié)
通過封裝一個(gè)Toast插件，提取不同業(yè)務(wù)之間公共的部分，減少業(yè)務(wù)的工作量。
好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
- vue教程之toast彈框全局調(diào)用示例詳解
- vue的toast彈窗組件實(shí)例詳解
- 詳解使用webpack打包編寫一個(gè)vue-toast插件
- vue.js中toast用法及使用toast彈框的實(shí)例代碼
- vue 自定義提示框(Toast)組件的實(shí)現(xiàn)代碼
- 基于 flexible 的 Vue 組件：Toast -- 顯示框效果
- 詳解基于Vue2.0實(shí)現(xiàn)的移動(dòng)端彈窗(Alert, Confirm, Toast)組件
- 詳解vue使用vue-layer-mobile組件實(shí)現(xiàn)toast，loading效果
- Vue自定義toast組件的實(shí)例代碼
相關(guān)文章
??Vuex?是一個(gè)專為?Vue.js?應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)。本文會(huì)通過一些簡單的示例，為大家詳細(xì)講解Vuex的使用，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-11-11
vue頁面渲染數(shù)組中數(shù)據(jù)文案后添加逗號最后不加
這篇文章主要為大家介紹了vue頁面渲染數(shù)組中數(shù)據(jù)文案后添加逗號最后不加逗號示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Vite中使用Ant?Design?Vue3.x框架教程示例
這篇文章主要為大家介紹了Vite中使用Ant?Design?Vue3.x框架教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
打通前后端構(gòu)建一個(gè)Vue+Express的開發(fā)環(huán)境
這篇文章主要介紹了打通前后端構(gòu)建一個(gè)Vue+Express的開發(fā)環(huán)境，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
基于Vue3實(shí)現(xiàn)印章徽章組件的示例代碼
這篇文章主要介紹了如何利用vue3實(shí)現(xiàn)簡單的印章徽章控件，文中通過示例代碼講解詳細(xì)，需要的朋友們下面就跟隨小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要給大家介紹了關(guān)于vue源碼之批量異步更新策略的相關(guān)資料，關(guān)于vue異步更新是我們?nèi)粘ｉ_發(fā)中經(jīng)常遇到的一個(gè)功能，需要的朋友可以參考下2021-05-05
Vue2 Element Schema Form 配置式生成表單的實(shí)現(xiàn)
本文主要介紹了Vue2 Element Schema Form 配置式生成表單的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
vue2.0實(shí)現(xiàn)導(dǎo)航菜單切換效果
這篇文章主要為大家詳細(xì)介紹了vue2.0實(shí)現(xiàn)導(dǎo)航菜單切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
通用vue組件化展示列表數(shù)據(jù)實(shí)例詳解
組件化開發(fā)能大幅提高應(yīng)用的開發(fā)效率、測試性、復(fù)用性等,下面這篇文章主要給大家介紹了關(guān)于通用vue組件化展示列表數(shù)據(jù)的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
詳解TypeScript+Vue 插件 vue-class-component的使用總結(jié)
這篇文章主要介紹了TypeScript+Vue 插件 vue-class-component的使用總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02