element-ui 全局配置Message提示距离窗口顶部的偏移量

需求

项目中使用this.$message写了大量Message提示，此时想修改Message提示距离窗口顶部的距离为200px，查看文档发现需要对Message传入offset参数。

 解决方案一

可以直接全局修改Message提示框的样式，但这种只适用于一次只能弹出一个提示框的情况，如出现多个提示框，则所有提示框会重叠在一块。

public.css

.el-message {
  top: 200px !important;
}

main.js

import 'public.css';

解决方案二

由于提示太多，一个个修改太繁琐，所以选择重写this.$message。

查看element-ui源码怎么写的

['success', 'warning', 'info', 'error'].forEach(type => {
  Message[type] = options => {
    if (typeof options === 'string') {
      options = {
      //options参数只有message一个
        message: options
      };
    }
    options.type = type;
    return Message(options);
  };
});

我们只需要在源码的基础上传入offset参数就好了，代码如下：

main.js

import Vue from 'vue';
import { Message } from 'element-ui';
//定义一个新的Message方法，多传入一个offset参数
const $message = options => {
  return Message({
    ...options,
    offset: 200
  });
};

//重写方法,将offset写入options
['success', 'warning', 'info', 'error'].forEach(type => {
  $message[type] = options => {
    if (typeof options === 'string') {
      options = {
        message: options,
        offset: 200
      };
    }
    options.type = type;
    return Message(options);
  };
});
//将$message挂载到this上
Vue.prototype.$message = $message;
//不加这行代码运行this.$message.closeAll时会报错
Vue.prototype.$message.closeAll = Message.closeAll;

拓展内容，控制Message提示每次只能弹出一个

main.js

import Vue from 'vue';
import { Message } from 'element-ui';
//定义一个新的Message方法
let messageInstance = null;
const $message = options => {
    if(messageInstance) {
	//判断是否有提示框，有则关闭
        messageInstance.close();
    }
    messageInstance = Message(options);
    return messageInstance;
};

//重写方法
['success', 'warning', 'info', 'error'].forEach(type => {
    $message[type] = options => {
        if (typeof options === 'string') {
            options = {
                message: options
            };
        }
        options.type = type;
        return Message(options);
    };
});
//将$message挂载到this上
Vue.prototype.$message = $message;
Vue.prototype.$message.closeAll = Message.closeAll;