Vue prevents the Message pop-up window from popping up multiple times

This version is element-plus

1. First, package a js file to reset the pop-up window in the utils folder. Name: resetMessage.js

 
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. Referenced in mian.js and mounted globally

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

or

In local reference, local mount

import { message } from '@/utils/resetMessage.js' 

3. How to use global mount

Use it in components that need to use pop-up windows, but you need to introduce getCurrentInstance and call it through proxy.$msg

import { getCurrentInstance } from 'vue'


submit(){
    const { proxy } = getCurrentInstance();// ctx中有问题，建议使用proxy中获取
    proxy.$msg.success('提交成功')
}

or

topical use

import { message } from '@/utils/resetMessage.js'

btnClick(){
    message({
        title: '点击成功',
        type: 'success'
    })
}

Helpful friends, a little love