此版本为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.在mian.js中引用,全局挂载
import { message } from '@/utils/resetMessage.js'
const app = createApp(App)
app.config.globalProperties.$msg = message; // 挂载
or
在局部引用,局部挂载
import { message } from '@/utils/resetMessage.js'
3.全局挂载使用方法
在需要使用弹窗的组件进行使用,但是需要引入 getCurrentInstance, 通过proxy.$msg来调用
import { getCurrentInstance } from 'vue'
submit(){
const { proxy } = getCurrentInstance();// ctx中有问题,建议使用proxy中获取
proxy.$msg.success('提交成功')
}
or
局部使用方法
import { message } from '@/utils/resetMessage.js'
btnClick(){
message({
title: '点击成功',
type: 'success'
})
}
管用的小伙伴们点点小爱心