参考element-ui 全局配置Message距离窗口顶部的偏移量(offset)
场景:前端页面第一次弹出框没有弹出,第二次及后续的提示框弹出了,
原因: 页面的页顶header把第一个弹出框挡住了,所以想加offset(偏移量),但是原生的没有这个选项,只能重写Message了

import Vue from 'vue';
import { Message } from "element-ui"
//定义一个新的Message方法,多传入一个offset参数,用于this.$messgae中修改offset中的初始值
const $message = options => {
  return Message({
    ...options,
    offset: 80
  });
};
//重写一遍success的方法,将offset写入options
["success", "warning", "info", "error"].forEach(type => {
  $message[type] = options => {
    if (typeof options === "string") {
      options = {
        message: options,
        offset: 80
      };
    }
    options.type = type;
    return Message(options);
  };
});
//将$message挂载到this上
Vue.prototype.$message = $message;
//如果用要使用 `this.$message.closeAll()`则加上下面
Vue.prototype.$message.closeAll =Message.closeAll;

示例:

Message({
       message: data.message,
       type: "error",
       duration: 5 * 1000,
       offset:80
   });
Logo

前往低代码交流专区

更多推荐