element-ui 中Message弹出框增加偏移量配置
参考:element-ui 全局配置Message距离窗口顶部的偏移量(offset)场景:前端页面第一次弹出框没有弹出,第二次及后续的提示框弹出了,原因: 页面的页顶header把第一个弹出框挡住了,所以想加offset(偏移量),但是原生的没有这个选项,只能重写Message了import Vue from 'vue';import { Message } from "element-ui"/
·
参考: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
});
更多推荐
已为社区贡献2条内容
所有评论(0)