vue3 防止elMessage 弹窗多次弹出

vue3与element plus 防止elMessage 弹窗多次弹出

1.首先对message进行重新封装

 
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.js 引入，并挂载 vue3

 
import { message } from '@/utils/resetMessage.js' 
const app = createApp(App)
app.config.globalProperties.$msg = message; // 挂载
 

3. 在需要使用弹窗的组件进行使用，但是需要引入 getCurrentInstance, 通过proxy.$msg来调用

import { getCurrentInstance } from 'vue'
 
setup(){
       const { proxy } = getCurrentInstance();// ctx中有问题，建议使用proxy中获取 
       proxy.$msg.success('设置车道参数成功')  // 使用
}

用于记录