element 消息提示始终只出现一个
编程语言
2023-06-21 09:51:02
阅读次数: 0
原理就不多解释了直接上代码
- 新建js文件用来存放一下代码(js名字可以根据自己喜好命名)
- 我这里直接命名为了message.js
message.js
import {
Message
} from 'element-ui';
let messageInstance = null;
const resetMessage = (options) => {
if (messageInstance) {
messageInstance.close();
}
Message.closeAll();
messageInstance = Message(options);
};
['error', 'success', 'info', 'warning'].forEach(type => {
resetMessage[type] = options => {
if (typeof options === 'string') {
options = {
message: options
}
}
options.type = type
return resetMessage(options)
}
})
export default resetMessage
- main.js中全局引入
import resetMessage from './utils/message'
Vue.use(ElementUI);
Vue.prototype.$message = resetMessage;
- 页面中使用
this.$message('这是一个消息提示')
this.$message.info('这是一个消息提示')
this.$message.error('这是一个错误提示')
this.$message.success('这是一个成功提示')
this.$message.warning('这是一个警告提示')
转载自blog.csdn.net/weixin_45243487/article/details/125615276