element-ui 全局配置Message距离窗口顶部的偏移量（offset）

作者：Nic_ 编写时间：2020-07-02

需求

使用this.$message.success('msg');写了大量的Message提示,此时想修改Message距离窗口顶部的偏移量发现需要对Message传入offset参数

element-ui 源码

先看一下源码对success等方法是如何定义的

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

导致我们只能传入一个message参数

解决方案

main.js

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

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

小结

修改后的代码经测试并不会影响原有的书写方式,如有bug请在评论处留言。

欢迎点赞、收藏、转发！

本文使用 mdnice 排版