前言
elementUi 作为前端主流 ui 框架之一，其中的 message 组件更是占据了系统提示信息中的半壁江山，但是 message 也有一个很明显的问题，例如当用户频繁点击按钮触发判断条件提示信息时、多个请求触发提示信息时，诸如此类，你就会看到如下图的操作。
问题截图
原因分析
可以看到，消息提示是动态向页面根节点插入 message 元素来实现弹框效果的，也就是说它们都拥有 message 的属性，通过这个信息我们就可以判断页面中 message 的个数来决定要不要弹出第二个提示框从而解决这个问题。
解决方案：
通过上述我们已经知道了问题所在和解决问题的思路，下面我们需要的就是将思路转为实操，如下：
1. 在项目中创建 optimizePop.js 文件
// 重置 message，防止重复点击重复弹出 message 弹框
import { Message } from 'element-ui'
let messageInstance = null
const mainMessage = options => {
// 如果弹窗已存在先关闭
if (messageInstance) messageInstance.close()
messageInstance = Message(options)
}
const arr = ['success', 'warning', 'info', 'error']
arr.forEach(type => {
mainMessage[type] = options => {
if (typeof options === 'string') {
options = {
message: options
}
}
options.type = type
return mainMessage(options)
}
})
const message = mainMessage
export default message
2. main.js 中引入文件并挂载
import message from '@/utils/optimizePop.js'
Vue.prototype.$message = message
最终实现效果如下图：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79346.html
