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 相关文章推荐
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
Jun 28 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 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开发中的错误收集,不定期更新。
2011/02/03 PHP
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
BOM与DOM的区别分析
2010/10/26 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
Underscore源码分析
2015/12/30 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
使用Python生成随机密码的示例分享
2016/02/18 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
PyQt5组件读取参数的实例
2019/06/25 Python
python顺序执行多个py文件的方法
2019/06/29 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
医药专业推荐信
2013/11/15 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python