没什么好说的,直接复制下面代码放在 main.js
中即可在组件中通过 this.$message.error('内容')
使用。
当然,你也可以自行封装,然后在 main.js
中引入挂载。
import { Message } from 'element-ui'
// 为了实现Class的私有属性
const showMessage = Symbol('showMessage')
/**
* 重写ElementUI的Message
* single默认值true,因为项目需求,默认只弹出一个,可以根据实际需要设置
*/
let messageInstance = null;
class DonMessage {
success (options, single = true) {
this[showMessage]('success', options, single)
}
warning (options, single = true) {
this[showMessage]('warning', options, single)
}
info (options, single = true) {
this[showMessage]('info', options, single)
}
error (options, single = true) {
this[showMessage]('error', options, single)
}
[showMessage] (type, options, single) {
// if (messageInstance && single) {
// messageInstance.close()//先把原来的关闭
// }
// messageInstance = Message[type](options)//再创建新的消息
if (single) {
// 判断是否已存在Message
if (document.getElementsByClassName('el-message').length === 0) {
Message[type](options)
}
} else {
Message[type](options)
}
}
}
Vue.prototype.$message = new DonMessage();