vue element-ui 中el-message重复弹出题目办理 el-message重复弹出办理办法

源码 · 2024-9-14 00:49:04

题目场景：我们在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')// ...其他代码

vue element-ui 中el-message重复弹出题目办理 el-message重复弹出办理办法

所属分类: 问答交流

新帖推荐: 30日

推荐作品