题目场景：我们在axios中同一处置处罚500、401、404状态码并同一抛出el-message提示，那么就会出现重复提示的题目非常的不友好。如图：
办理办法：
新建一个resetMessage.js文件,写入以下代码
// resetMessage.js// 重置message，防止重复点击重复弹出message弹框import { Message } from 'element-ui'let messageDom = nullconst 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.jsimport { myMessage } from '../plugins/resetMessage'// ...其他代码myMessage.warning('xxxxxxxx')// ...其他代码 |
