相信很多小伙伴在做项目的时候都会遇到一个问题,那就是我们使用 elment ui 或者 element-plus 的时候,使用里面的弹窗组件,在同一按钮多次点击的时候,会触发很多次这个弹窗,看着很不舒服,哈哈。 所以我就想着能不能找到解决的办法,终于, 功夫不负有心人,让我找到了。下面我就来展示下我找到的解决办法。
1. 首先在utils文件夹里面封装一个 重置弹窗的 js 文件。 名字: 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. 在 main.js 引入,并挂载
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中获取
// 登录
const onSubmit = (formRef) => {
formRef.validate(async (valid) => {
if (valid) {
const { data: res } = await _login(form)
if (res.meta.status !== 200) ElMessage.error('账号或密码错误')
window.sessionStorage.setItem("active", 'welcome');
store.commit("user/setToken",res.data)
proxy.$msg.success(res.meta.msg)
router.push('/home')
} else {
return false
}
})
}
return { onSubmit}
}
亲测,有效,有帮助到的小伙伴,点点小爱心,加油!