全局配置ElementUI的message组件配置和样式

在项目开发收尾的工作的时候，甲方验收的时候，甲方可能会提出一系列的修改需求，有的修改会涉及到全局的，比如需要修改elementUi中message组件的停留时间和样式，一个页面一个页面的去修改不太现实，所以就只能全局性的去修改elementUi的message组件了。

一、全局修改message内置参数

比如为了不遮挡内容，需要修改message的默认距离顶端的距离为offset: 100

在项目的引入ElementUI框架的main.js文件中修改：

import ElementUI from 'element-ui'
Vue.use(ElementUI)

注意：
全局ElementUI引入需要写在前面，以免被后面的message覆盖，如果写在下面代码的后面将不起作用，因为被原生elementUI覆盖了

import ElementUI from 'element-ui'
// 引入组件
import {Message} from 'element-ui'

Vue.use(ElementUI)

Vue.prototype.$message = function (option){
    option.offset = 100
    return Message(option)
}
Vue.prototype.$message.success = function (msg) {
    return Message.success({
        message: msg,
        offset: 100
    })
}
Vue.prototype.$message.warning = function (msg) {
    return Message.warning({
        message: msg,
        offset: 100
    })
}
Vue.prototype.$message.error = function (msg) {
    return Message.error({
        message: msg,
        offset: 100
    })
}

二、全局修改message的样式

比如若想全局修改success和error的样式，通过 .el-message–success .el-message–error 等类增加样式，然后在main.js的最后引入次样式文件即可。

.el-message--success{
  border:1px dashed  blue;
}
.el-message--error{
  border:1px dashed  balck;
}

注：如果遇到不生效的时候，建议大家可以全局使用>>>、/deep/、:global() 来编写需要更改的样式即可生效。