全局修改elementUI的$message的持续时间

因为项目中用到了$message但是觉得持续时间太长，每一个都去配置duration也麻烦，就在网上找解决方案，找了很多都没用。

先说我的配置

1. 我没有直接在main.js里面导入elementui所有组件，而是在plugins文件夹下的element.js里面去引用的组件
2. 因为项目需要，我的main.js里面单独导入了$message，因为我的项目需要根据全局的网络请求做消息提示

要解决的问题

1. 我项目中所有使用到的$message的地方都做时间的全局配置
2. 特别的，解决问题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里面罢了。

写在后面

深究这么配置的原理应该是重写了相关的方法，我没有去研究，目前来看也没有那个能力。欢迎留言交流~