这篇文章给大家分享的是有关ElementUI中如何实现Message功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
创新互联建站一直通过网站建设和网站营销帮助企业获得更多客户资源。 以"深度挖掘，量身打造，注重实效"的一站式服务，以
网站设计、成都网站设计、移动互联产品、
网络营销推广服务为核心业务。10年网站制作的经验，使用新网站建设技术，全新开发出的标准网站，不但价格便宜而且实用、灵活，特别适合中小公司网站制作。网站管理系统简单易用，维护方便，您可以完全操作网站资料，是中小公司快速网站建设的选择。
在最近项目开发中，接口错误信息是在拦截器统一处理，在一次产品大大验收过程中，由于服务器没有重启完成，导致前端弹出一推错误提示语，产品大大对于提示语的交互效果提出了一系列的建议。由于项目使用了ElementUI框架，加上本人喜欢投（xin）机（shou）取（nian）巧（lai），于是去查看ElementUI Message的源码，根据实际需求自定义了Message功能。
场景描述
实现方案
场景一
功能描述
代码实现
新建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)
}
}场景三
功能描述
代码实现
静态配置项和消息容器队列
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功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
新闻标题：ElementUI中如何实现Message功能-创新互联
本文网址：
http://cdkjz.cn/article/gcshc.html
