问题场景：我们在axios中统一处理500、401、404状态码并统一抛出el-message提示，那么就会出现重复提示的问题非常的不友好。如图：
解决办法：
新建一个resetMessage.js文件,写入以下代码
// resetMessage.js
// 重置message，防止重复点击重复弹出message弹框
import { Message } from 'element-ui'
let messageDom = null
const resetMessage = (options) => {
if (messageDom) messageDom.close() // 判断弹窗是否已存在,若存在则关闭
messageDom = Message(options)
}
// message类型
const typeArr = ['success', 'error', 'warning', 'info']
typeArr.forEach(type => {
resetMessage[type] = options => {
if (typeof options === 'string') options = { message: options }
options.type = type
return resetMessage(options)
}
})
export const myMessage = resetMessage
方法一：全局引入及使用
在main.js文件中引入并挂在到全局
注意：挂载自定义$message必须放在Vue.use(ElementUI)后面，才能覆盖element-ui默认的message，不然没有效果
// main.js
... // 其他代码
/ 引入重写的resetMessage.js文件
import { myMessage } from './plugins/resetMessage'
Vue.use(ElementUI)
// 注意：挂载自定义$message必须放在Vue.use(ElementUI)后面，才能覆盖element-ui默认的message，不然没有效果
Vue.prototype.$message = myMessage
...// 其他代码
// page.vue 页面调用
methods: {
test() {
this.$message({message: '测试', type: 'success'})
setInterval(()=> { this.$message.info('测试12')},1000)
}
}
方法二：局部引入及使用
// axios.js
import { myMessage } from '../plugins/resetMessage'
// ...其他代码
myMessage({
message,
type: 'error'
})
// ...其他代码
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/64754.html
