ElementPlus弹出框多次弹出问题

最新推荐文章于 2024-05-23 14:54:20 发布

kadenqxwang

最新推荐文章于 2024-05-23 14:54:20 发布

阅读量676

点赞数 10

文章标签：前端 javascript

本文链接：https://blog.csdn.net/g841805/article/details/135930572

版权

1.新建一个文件夹ResetMessage

 
import { ElMessage } from 'element-plus' //引入message弹出框
 
let messageDom = null
const resetMessage = (options) => {
  if (messageDom) messageDom.close() // 判断弹窗是否已存在,若存在则关闭
  messageDom = ElMessage(options)
}
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 message = resetMessage

2.在main组件挂载

//elmessage防止多次弹出
import { message } from '@/utils/resetMessage/index';
 // 挂载elmessage防止多次弹出  
app.config.globalProperties.$msg = message;

3.在组件内使用

import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const handerExceed = () => {
  proxy.$msg.warning({
    message: '最多提交一个文件',
    duration: 3000
  })
}