在使用了message的地方,多次点击就会出现很多个提示,影响用户使用
我们可以通过重写message来解决这个问题
在main.js中写入
import { Message } from 'element-ui'
// 为了实现Class的私有属性
const showMessage = Symbol('showMessage')
/**
* 重写ElementUI的Message
* single默认值true
*/
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 (single) {
// 判断是否已存在Message
// 设置页面上同时出现message提示的个数
if (document.getElementsByClassName('el-message').length <= 3) {
Message[type](options)
}
} else {
Message[type](options)
}
}
}
Vue.use(Message)
Vue.prototype.$message = new DonMessage()
按需引入message后刷新页面会弹出一个空白提示
解决办法
//Vue.use(Message)
Vue.component(Message.name, Message)