ElementUI之Message功能拓展詳解
更新時(shí)間：2019年10月18日 09:44:35 作者：ZCoder
這篇文章主要介紹了ElementUI之Message功能拓展詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
在最近項(xiàng)目開(kāi)發(fā)中，接口錯(cuò)誤信息是在攔截器統(tǒng)一處理，在一次產(chǎn)品大大驗(yàn)收過(guò)程中，由于服務(wù)器沒(méi)有重啟完成，導(dǎo)致前端彈出一推錯(cuò)誤提示語(yǔ)，產(chǎn)品大大對(duì)于提示語(yǔ)的交互效果提出了一系列的建議。由于項(xiàng)目使用了ElementUI框架，加上本人喜歡投（xin）機(jī)（shou）?。╪ian）巧（lai），于是去查看ElementUI Message的源碼，根據(jù)實(shí)際需求自定義了Message功能。
場(chǎng)景描述
- 場(chǎng)景一：限制頁(yè)面同時(shí)展示消息提示語(yǔ)的最大數(shù)量（優(yōu)先展示后插入的提示語(yǔ)）
- 場(chǎng)景二：根據(jù)不同情況可以優(yōu)先顯示新/舊消息提示語(yǔ)
- 場(chǎng)景三：如果超出了最大顯示數(shù)量，則剩余的消息以隊(duì)列的顯示依次展示
實(shí)現(xiàn)方案
場(chǎng)景一
功能描述
- 根據(jù)設(shè)置的最大數(shù)量，如果存儲(chǔ)的實(shí)例列表instances長(zhǎng)度超出最大限制數(shù)則銷(xiāo)毀之前的消息實(shí)例instance（調(diào)用Message方法創(chuàng)建消息提示語(yǔ)會(huì)返回當(dāng)前消息的一個(gè)實(shí)例），否則保存新建實(shí)例instance到實(shí)例列表instances中
- 如果消息提示語(yǔ)消失，需要從實(shí)例列表instances中移除當(dāng)前實(shí)例instance，確保頁(yè)面顯示消息數(shù)量與instances列表長(zhǎng)度統(tǒng)一
代碼實(shí)現(xiàn)
新建ZMessage構(gòu)造函數(shù)import { Message } from 'element-ui'
function ZMessage (options) {
if (!(this instanceof ZMessage)) {
return new ZMessage(options)
}
this.init(options)
}
靜態(tài)配置項(xiàng)和實(shí)例列表
ZMessage.config = {
max: 0, // 最大顯示數(shù)
}
ZMessage.instances = [] // 消息體實(shí)例列表
定義創(chuàng)建消息和監(jiān)聽(tīng)實(shí)例消失事件方法
ZMessage.prototype.setMessage = function (options) {
const instance = Message(options)
// 監(jiān)聽(tīng)消息消失事件，從實(shí)例列表移除當(dāng)前消息實(shí)例
instance.$watch('visible', val => {
ZMessage.instances = ZMessage.instances.filter(item => item !== instance)
})
ZMessage.instances.push(instance)
}
定義移除消息實(shí)例方法
ZMessage.prototype.prototype.removeMessages = function () {
const {
instances,
config: { max }
} = ZMessage
ZMessage.instances = instances.filter((instance, index) => {
if (index < instances.length - max + 1) {
instance && instance.close()
return false
}
return true
})
}
初始化消息
ZMessage.prototype.init = function (options) {
const { max } = ZMessage.config
// 判斷如果超出最大消息數(shù)時(shí)，刪除消息
if (max > 0 && ZMessage.instances.length >= max) {
this.removeMessages() :
}
if (ZMessage.instances.length < max || !max) {
this.setMessage(options)
}
}
場(chǎng)景二
功能描述
- 在場(chǎng)景一的基礎(chǔ)上新增優(yōu)先取消息還是舊消息的標(biāo)志操作
代碼實(shí)現(xiàn)
靜態(tài)配置項(xiàng)和實(shí)例列表
ZMessage.config = {
max: 0, // 最大顯示數(shù)
showNewest: true // 是否后添加的消息覆蓋前面的消息
}
初始化
ZMessage.prototype.init = function (options) {
const { max, showNewest } = ZMessage.config
// 判斷如果超出最大消息數(shù)時(shí)，刪除消息
if (max > 0 && ZMessage.instances.length >= max && showNewest) {
this.removeMessages()
}
if (ZMessage.instances.length < max || !max) {
this.setMessage(options)
}
}
場(chǎng)景三
功能描述
- 在場(chǎng)景一場(chǎng)景二基礎(chǔ)上添加是否使用隊(duì)列方式存儲(chǔ)未展示消息的實(shí)例，如果超出了最大限制數(shù)則創(chuàng)建消息實(shí)例的容器存儲(chǔ)到消息隊(duì)列queue中
- 監(jiān)聽(tīng)是否有消息消失，如果有則從消息隊(duì)列queue中取出第一個(gè)容器，創(chuàng)建消息實(shí)例
代碼實(shí)現(xiàn)
靜態(tài)配置項(xiàng)和消息容器隊(duì)列
ZMessage.config = {
max: 0, // 最大顯示數(shù)
showNewest: true, // 是否后添加的消息覆蓋前面的消息
isQueue: false // 是否以隊(duì)列形式存儲(chǔ)為展示消息
}
ZMessage.queue = [] // 未展示數(shù)據(jù)的消息容器隊(duì)列
生成隊(duì)列
// 生成隊(duì)列元素，延遲執(zhí)行
ZMessage.prototype.saveToQueue = function (options) {
return () => {
this.setMessage(options)
}
}
初始化
// 初始化
ZMessage.prototype.init = function (options) {
const { max, isQueue, showNewest } = ZMessage.config
// 判斷如果超出最大消息數(shù)時(shí)，刪除消息
if (max > 0 && ZMessage.instances.length >= max && showNewest && !isQueue) {
this.removeMessages()
}
if (ZMessage.instances.length >= max && isQueue) {
// 添加隊(duì)列元素
ZMessage.queue.push(this.saveToQueue(options))
} else if (ZMessage.instances.length < max || !max) {
this.setMessage(options)
}
}
獲取消息實(shí)例和添加事件監(jiān)聽(tīng)
// 獲取消息實(shí)例和添加事件監(jiān)聽(tīng)
ZMessage.prototype.setMessage = function (options) {
const instance = Message(options)
// 監(jiān)聽(tīng)消息消失事件，從實(shí)例列表移除當(dāng)前消息實(shí)例
instance.$watch('visible', val => {
ZMessage.instances = ZMessage.instances.filter(item => item !== instance)
if (ZMessage.config.isQueue && ZMessage.queue.length) {
ZMessage.queue.shift()()
}
})
ZMessage.instances.push(instance)
}
最后一步
添加不同消息類(lèi)型功能靜態(tài)方法
const messageTypes = ['success', 'warning', 'error', 'info']
// 各消息類(lèi)型靜態(tài)方法
messageTypes.forEach(type => {
ZMessage[type] = options => {
let opts = options
if (typeof options === 'string') {
opts = {
message: options
}
}
return new ZMessage({ ...opts, type })
}
})
完整代碼
// ZMessage.js
import { Message } from 'element-ui'
const messageTypes = ['success', 'warning', 'error', 'info']
function ZMessage (options) {
if (!(this instanceof ZMessage)) {
return new ZMessage(options)
}
this.init(options)
}
ZMessage.queue = [] // 未展示數(shù)據(jù)的消息隊(duì)列
ZMessage.instances = [] // 消息體實(shí)例列表
// 配置項(xiàng)
ZMessage.config = {
max: 0, // 最大顯示數(shù)
isQueue: false, // 是否以隊(duì)列形式存儲(chǔ)為展示消息
showNewest: true // 是否后添加的消息覆蓋前面的消息
}
// 配置參數(shù)
ZMessage.setConfig = function (config = {}) {
ZMessage.config = { ...ZMessage.config, ...config }
}
ZMessage.close = Message.close
ZMessage.closeAll = Message.closeAll
// 各消息類(lèi)型靜態(tài)方法
messageTypes.forEach(type => {
ZMessage[type] = options => {
let opts = options
if (typeof options === 'string') {
opts = {
message: options
}
}
return new ZMessage({ ...opts, type })
}
})
// 初始化
ZMessage.prototype.init = function (options) {
const { max, isQueue, showNewest } = ZMessage.config
// 判斷如果超出最大消息數(shù)時(shí)，刪除消息
if (max > 0 && ZMessage.instances.length >= max && showNewest && !isQueue) {
this.removeMessages()
}
if (ZMessage.instances.length >= max && isQueue) {
// 添加隊(duì)列元素
ZMessage.queue.push(this.saveToQueue(options))
} else if (ZMessage.instances.length < max || !max) {
this.setMessage(options)
}
}
// 移除消息
ZMessage.prototype.removeMessages = function () {
const {
instances,
config: { max }
} = ZMessage
ZMessage.instances = instances.filter((instance, index) => {
if (index < instances.length - max + 1) {
instance && instance.close()
return false
}
return true
})
}
// 獲取消息實(shí)例和添加事件監(jiān)聽(tīng)
ZMessage.prototype.setMessage = function (options) {
const instance = Message(options)
// 監(jiān)聽(tīng)消息消失事件，從實(shí)例列表移除當(dāng)前消息實(shí)例
instance.$watch('visible', val => {
ZMessage.instances = ZMessage.instances.filter(item => item !== instance)
if (ZMessage.config.isQueue && ZMessage.queue.length) {
ZMessage.queue.shift()()
}
})
ZMessage.instances.push(instance)
}
// 生成隊(duì)列元素，延遲執(zhí)行
ZMessage.prototype.saveToQueue = function (options) {
return () => {
this.setMessage(options)
}
}
export default ZMessage
// 使用方式
import Vue from 'vue'
import ZMessage from 'path/to/ZMessage.js'
// 引入Element
// ....
// 自定義配置項(xiàng)
ZMessage.setConfig({ max: 1, isQueue: false, showNewest: true })
// 覆蓋默認(rèn)$message
Vue.prototype.$message = ZMessage
小結(jié)
希望看完本篇文章能對(duì)你拓展ElementUI框架的Message組件功能有所幫助。也希望大家多多支持腳本之家。
相關(guān)文章
使用Vue實(shí)現(xiàn)移動(dòng)端左滑刪除效果附源碼
這篇文章主要介紹了使用Vue實(shí)現(xiàn)移動(dòng)端左滑刪除效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
在vue3中父組件訪問(wèn)子組件中的屬性和方法是需要借助于ref,蘇哦一本文小編給大家介紹了vue3父組件如何使用ref獲取獲取子組件的屬性和方法,文中詳細(xì)的代碼講解,需要的朋友可以參考下2023-11-11
在vue項(xiàng)目中優(yōu)雅的使用SVG的方法實(shí)例詳解
本文旨在介紹如何在項(xiàng)目中配置和方便的使用svg圖標(biāo)。本文以vue項(xiàng)目為例給大家介紹在vue項(xiàng)目中優(yōu)雅的使用SVG的方法，需要的朋友參考下吧2018-12-12
vue3+three.js實(shí)現(xiàn)疫情可視化功能
這篇文章主要介紹了vue3+three.js實(shí)現(xiàn)疫情可視化,本文通過(guò)實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
本文主要介紹了ElementUI中el-tabs事件綁定的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
vue實(shí)現(xiàn)的網(wǎng)易云音樂(lè)在線播放和下載功能案例
這篇文章主要介紹了vue實(shí)現(xiàn)的網(wǎng)易云音樂(lè)在線播放和下載功能,結(jié)合具體實(shí)例形式分析了網(wǎng)易云音樂(lè)相關(guān)接口調(diào)用與操作技巧,需要的朋友可以參考下2019-02-02
組件是vue技術(shù)中非常重要的部分,組件使得與ui相關(guān)的輪子可以方便的制造和共享,進(jìn)而使得vue使用者的開(kāi)發(fā)效率大幅提升,這篇文章主要給大家介紹了關(guān)于uni-app自定義組件的相關(guān)資料,需要的朋友可以參考下2024-02-02
Axios?是一個(gè)基于?promise?的網(wǎng)絡(luò)請(qǐng)求庫(kù)，可以用于瀏覽器和?node.js，是一個(gè)第三方插件，第三方異步請(qǐng)求工具庫(kù)，這篇文章主要介紹了Axios在vue項(xiàng)目中的封裝方法,需要的朋友可以參考下2022-10-10
Vue實(shí)現(xiàn)拖拽穿梭框功能四種方式實(shí)例詳解
這篇文章主要介紹了Vue實(shí)現(xiàn)拖拽穿梭框功能四種方式,使用原生js實(shí)現(xiàn)拖拽，VUe使用js實(shí)現(xiàn)拖拽穿梭框，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
vue實(shí)現(xiàn)點(diǎn)擊按鈕下載文件功能
這篇文章主要介紹了vue中點(diǎn)擊按鈕下載文件，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10