ElementUI中如何實現Message功能

這篇文章給大家分享的是有關ElementUI中如何實現Message功能的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

在最近項目開發中，接口錯誤信息是在攔截器統一處理，在一次產品大大驗收過程中，由于服務器沒有重啟完成，導致前端彈出一推錯誤提示語，產品大大對于提示語的交互效果提出了一系列的建議。由于項目使用了ElementUI框架，加上本人喜歡投（xin）機（shou）取（nian）巧（lai），于是去查看ElementUI Message的源碼，根據實際需求自定義了Message功能。

場景描述

• 場景一：限制頁面同時展示消息提示語的最大數量（優先展示后插入的提示語）

• 場景二：根據不同情況可以優先顯示新/舊消息提示語

• 場景三：如果超出了最大顯示數量，則剩余的消息以隊列的顯示依次展示

實現方案

場景一

功能描述

• 根據設置的最大數量，如果存儲的實例列表instances長度超出最大限制數則銷毀之前的消息實例instance（調用Message方法創建消息提示語會返回當前消息的一個實例），否則保存新建實例instance到實例列表instances中

• 如果消息提示語消失，需要從實例列表instances中移除當前實例instance，確保頁面顯示消息數量與instances列表長度統一

代碼實現

新建ZMessage構造函數import { Message } from 'element-ui'

function ZMessage (options) {
  if (!(this instanceof ZMessage)) {
    return new ZMessage(options)
  }
  this.init(options)
}

靜態配置項和實例列表

ZMessage.config = {
 max: 0, // 最大顯示數
}

 
ZMessage.instances = [] // 消息體實例列表

定義創建消息和監聽實例消失事件方法

ZMessage.prototype.setMessage = function (options) {
 const instance = Message(options)
 // 監聽消息消失事件，從實例列表移除當前消息實例
 instance.$watch('visible', val => {
  ZMessage.instances = ZMessage.instances.filter(item => item !== instance)
 })
 ZMessage.instances.push(instance)
}

定義移除消息實例方法

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
 // 判斷如果超出最大消息數時，刪除消息
 if (max > 0 && ZMessage.instances.length >= max) {
  this.removeMessages() :
 }
 if (ZMessage.instances.length < max || !max) {
  this.setMessage(options)
 }
}

場景二

功能描述

• 在場景一的基礎上新增優先取消息還是舊消息的標志操作

代碼實現

靜態配置項和實例列表

ZMessage.config = {
 max: 0, // 最大顯示數
 showNewest: true // 是否后添加的消息覆蓋前面的消息
}

初始化

ZMessage.prototype.init = function (options) {
 const { max, showNewest } = ZMessage.config
 // 判斷如果超出最大消息數時，刪除消息
 if (max > 0 && ZMessage.instances.length >= max && showNewest) {
  this.removeMessages()
 }
 if (ZMessage.instances.length < max || !max) {
  this.setMessage(options)
 }
}

場景三

功能描述

• 在場景一場景二基礎上添加是否使用隊列方式存儲未展示消息的實例，如果超出了最大限制數則創建消息實例的容器存儲到消息隊列queue中

• 監聽是否有消息消失，如果有則從消息隊列queue中取出第一個容器，創建消息實例

代碼實現

靜態配置項和消息容器隊列

ZMessage.config = {
 max: 0, // 最大顯示數
 showNewest: true, // 是否后添加的消息覆蓋前面的消息
 isQueue: false // 是否以隊列形式存儲為展示消息
}

ZMessage.queue = [] // 未展示數據的消息容器隊列

生成隊列

// 生成隊列元素，延遲執行
ZMessage.prototype.saveToQueue = function (options) {
 return () => {
  this.setMessage(options)
 }
}

初始化

// 初始化
ZMessage.prototype.init = function (options) {
 const { max, isQueue, showNewest } = ZMessage.config
 // 判斷如果超出最大消息數時，刪除消息
 if (max > 0 && ZMessage.instances.length >= max && showNewest && !isQueue) {
  this.removeMessages()
 }

 if (ZMessage.instances.length >= max && isQueue) {
  // 添加隊列元素
  ZMessage.queue.push(this.saveToQueue(options))
 } else if (ZMessage.instances.length < max || !max) {
  this.setMessage(options)
 }
}

獲取消息實例和添加事件監聽

// 獲取消息實例和添加事件監聽
ZMessage.prototype.setMessage = function (options) {
 const instance = Message(options)
 // 監聽消息消失事件，從實例列表移除當前消息實例
 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)
}

最后一步

添加不同消息類型功能靜態方法

const messageTypes = ['success', 'warning', 'error', 'info']

// 各消息類型靜態方法
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 = [] // 未展示數據的消息隊列

ZMessage.instances = [] // 消息體實例列表

// 配置項
ZMessage.config = {
 max: 0, // 最大顯示數
 isQueue: false, // 是否以隊列形式存儲為展示消息
 showNewest: true // 是否后添加的消息覆蓋前面的消息
}

// 配置參數
ZMessage.setConfig = function (config = {}) {
 ZMessage.config = { ...ZMessage.config, ...config }
}

ZMessage.close = Message.close

ZMessage.closeAll = Message.closeAll

// 各消息類型靜態方法
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
 // 判斷如果超出最大消息數時，刪除消息
 if (max > 0 && ZMessage.instances.length >= max && showNewest && !isQueue) {
  this.removeMessages()
 }

 if (ZMessage.instances.length >= max && isQueue) {
  // 添加隊列元素
  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
 })
}

// 獲取消息實例和添加事件監聽
ZMessage.prototype.setMessage = function (options) {
 const instance = Message(options)
 // 監聽消息消失事件，從實例列表移除當前消息實例
 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)
}

// 生成隊列元素，延遲執行
ZMessage.prototype.saveToQueue = function (options) {
 return () => {
  this.setMessage(options)
 }
}

export default ZMessage


// 使用方式
import Vue from 'vue'
import ZMessage from 'path/to/ZMessage.js'
// 引入Element
// ....

// 自定義配置項
ZMessage.setConfig({ max: 1, isQueue: false, showNewest: true })

// 覆蓋默認$message
Vue.prototype.$message = ZMessage

感謝各位的閱讀！關于“ElementUI中如何實現Message功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！