因为项目中用到了$message但是觉得持续时间太长,每一个都去配置duration也麻烦,就在网上找解决方案,找了很多都没用。
先说我的配置
- 我没有直接在main.js里面导入elementui所有组件,而是在plugins文件夹下的element.js里面去引用的组件
- 因为项目需要,我的main.js里面单独导入了$message,因为我的项目需要根据全局的网络请求做消息提示
要解决的问题
- 我项目中所有使用到的$message的地方都做时间的全局配置
- 特别的,解决问题1的方法不能解决因为main.js里面单独导入的$message的duration的问题
解决方法
(1)问题一解决方案(都是在element.js里面操作的):
参考了一篇博客,直接附上链接吧:
全局修改elementUI的$message默认显示时间的方法
不过我没有全部参考这个代码,而是做了修改:
// 在element.js里面配置的
// 这一段代码不能少
// 这里注意一下,我用的$msg,所以我在使用的时候也是用的this.$msg
Vue.prototype.$msg = function(msg){
return Message({
message:msg,
duration:1500
})
}
// 分别对success、warning和error等样式进行设置
Vue.prototype.$msg.success = function (msg) {
return Message.success({
message: msg,
duration: 1500
})
}
Vue.prototype.$msg.warning = function (msg) {
return Message.warning({
message: msg,
duration: 1500
})
}
Vue.prototype.$msg.error = function (msg) {
return Message.error({
message: msg,
duration: 1500
})
}
附上一段使用的时候的代码:
return this.$msg.success("编辑成功!")
(2)问题二的解决(都是在main.js里面操作的)
首先我用这行代码引入了Message组件
import {Message} from 'element-ui'
然后用这两段代码配置duration
let Messagee = function(msg) {
return Message({
message:msg,
duration:1500
})
}
Messagee.error = function (msg) {
return Message.error({
message: msg,
duration: 1500
})
}
同样的,附上一段使用的时候的代码
Messagee.error('拒绝访问');
特别提示
把问题一里面的代码放到main.js里面也是可以的,如果你的项目根本就没有element.js,就只能放到main.js里面了。不过我个人习惯放在element.js里面罢了。
写在后面
深究这么配置的原理应该是重写了相关的方法,我没有去研究,目前来看也没有那个能力。欢迎留言交流~