ElementUI之Message功能拓展详解

更新时间：2019年10月18日 09:44:35 作者：ZCoder

这篇文章主要介绍了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组件功能有所帮助。也希望大家多多支持脚本之家。

您可能感兴趣的文章:

仿照Element-ui实现一个简易的$message方法

vue实现顶部导航栏以及跳转
这篇文章主要介绍了vue实现顶部导航栏以及跳转方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-09-09
vue仿element实现分页器效果
这篇文章主要介绍了vue仿element实现分页器效果，实现思路是定一个值foldPage, 意为当前最多显示的标签数,当总页数超过即显示省略.省略分为左边省略(folder1)和右边省略(folder2)，具体实例代码大家参考下本文
2018-09-09
Vue3 封装 Element Plus Menu 无限级菜单组件功能的详细代码
本文分别使用 SFC（模板方式）和 tsx 方式对 Element Plus *el-menu* 组件进行二次封装，实现配置化的菜单，有了配置化的菜单，后续便可以根据路由动态渲染菜单，对Vue3 无限级菜单组件相关知识感兴趣的朋友一起看看吧
2022-09-09
vue实现拖拽窗口功能
这篇文章主要为大家详细介绍了vue实现拖拽窗口功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
element el-select下拉框选择失效解决办法
el-select即选择器用于从若干个候选项中选择其中一个(或者多个),在传统网页开发中选择器经常被称作下拉框、下拉列表是最常用的表单元素之一,这篇文章主要给大家介绍了关于element el-select下拉框选择失效解决办法,需要的朋友可以参考下
2023-08-08
vue初尝试--项目结构(推荐)
这篇文章主要介绍了vue初尝试--项目结构的相关知识,需要的朋友可以参考下
2018-01-01
vue项目实战总结篇
离放假还有1天，今天小编抽空给大家分享前端时间小编做的vue项目，非常完整，需要的朋友参考下
2018-02-02
vue引用echarts饼图不显示图例的解决
这篇文章主要介绍了vue引用echarts饼图不显示图例的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
2分钟实现一个Vue实时直播系统的示例代码
这篇文章主要介绍了2分钟实现一个Vue实时直播系统的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
vue实现tab栏切换效果
这篇文章主要为大家详细介绍了vue实现tab栏切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-09-09