前言:在开发中,我们经常会用到这个message消息提示组件,提示用户操作成功,用户操作失败等,但是随着业务场景的增加,我们对消息提示的这个组件功能也会随之调整,鄙人在开发中就遇到下列问题:
1.消息提示弹出太多,如下图:
![](https://i-blog.csdnimg.cn/direct/f150bf08eecb4f4d9d3b5f55efff3a7b.png)
1.1消息提示弹出太多解决方案
1.1.1我们创建一个reMessage.js文件,在文件里我们可以这样写
import { ElMessage } from 'element-plus' //引入message弹出框,Vue3版本
//import { Message} from 'element-ui'; //引入message弹出框,Vue2版本
let messageDom = null
const resetMessage = (options) => {
if (messageDom) messageDom.close() // 判断弹窗是否已存在,若存在则关闭
messageDom = ElMessage(options)//Vue3版本
//messageDom = Message(options)//Vue2版本
}
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
1.1.1 在vue2中使用
在main.js文件中,我们引入reMessage.js文件,如下图
注意:标记4一定要写在标记3:Vue.use(elementui)之后
在配置好上述步骤后,我们可以在该项目任意.vue文件里面使用下面的方法。
//方法一
this.$message.success('操作成功!')
//方法二
this.$message({type:success,message:'操作成功!'});
在任意.js文件里面,我们这样使用
import { Message } from '@/utils/reMessage';
//方法一
Message({type: 'success',message: '操作成功!'});
//方法二
Message.success('操作成功!');
1.1.2 在vue3中使用
我们在需要使用的页面里面引入reMessage.js文件,直接使用即可。
2.对话框遮罩遮住message消息提示解决方案
1.我们可以创建一个公共.css文件里面,并且写上样式:
//给message消息提示创建类名
.messageIndex {
z-index: 3000 !important;
}
如下图,创建一个all.css公共文件,
2.在mian.js里面引入all.css文件
3.场景使用
//在vue2中使用
this.$message({ message: "操作成功", type: "success", customClass: "messageIndex" });
//在vue3中使用
Message({ message: "操作成功", type: "success", customClass: "messageIndex" });