ElementUI之Message功能拓展详解


Posted in Javascript onOctober 18, 2019

在最近项目开发中,接口错误信息是在拦截器统一处理,在一次产品大大验收过程中,由于服务器没有重启完成,导致前端弹出一推错误提示语,产品大大对于提示语的交互效果提出了一系列的建议。由于项目使用了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组件功能有所帮助。也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
jQuery操作select下拉框的text值和value值的方法
May 31 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
js实现简易计算器功能
Oct 18 #Javascript
JavaScript实现更换背景图片
Oct 18 #Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 #jQuery
CountUp.js数字滚动插件使用方法详解
Oct 17 #Javascript
CountUp.js实现数字滚动增值效果
Oct 17 #Javascript
countUp.js实现数字动态变化效果
Oct 17 #Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 #jQuery
You might like
php ajax 静态分页过程形式
2011/09/02 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
基于Python实现粒子滤波效果
2020/12/01 Python
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
创业计划书的主要内容有哪些
2014/01/29 职场文书
党支部对照检查材料
2014/08/25 职场文书
典型事迹材料范文
2014/12/29 职场文书
护士求职简历自我评价
2015/03/10 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书
python 如何用terminal输入参数
2021/05/25 Python
解析MySQL索引的作用
2022/03/03 MySQL