ElementUI全局配置message的弹窗时间

由于默认的message的配置是通过options传进去的，但是并没有开放全局配置给用户，看message的源码发现默认是3s。

export default {data() {return {visible: false,message: '',// 在构造器中配置的默认时长duration: 3000,type: 'info',iconClass: '',customClass: '',onClose: null,showClose: false,closed: false,verticalOffset: 20,timer: null,dangerouslyUseHTMLString: false,center: false};},
}

并且可以从源码中看到，配置options是调用Message方法时传入的，若没有传入就会使用默认配置

// 通过Vue.extend生成构造函数
let MessageConstructor = Vue.extend(Main);const Message = function(options) {if (Vue.prototype.$isServer) return;options = options || {};if (typeof options === 'string') {options = {message: options};}let userOnClose = options.onClose;let id = 'message_' + seed++;options.onClose = function() {Message.close(id, userOnClose);};instance = new MessageConstructor({data: options});instance.id = id;if (isVNode(instance.message)) {instance.$slots.default = [instance.message];instance.message = null;}instance.$mount();document.body.appendChild(instance.$el);let verticalOffset = options.offset || 20;instances.forEach(item => {verticalOffset += item.$el.offsetHeight + 16;});instance.verticalOffset = verticalOffset;instance.visible = true;instance.$el.style.zIndex = PopupManager.nextZIndex();instances.push(instance);return instance;
};

['success', 'warning', 'info', 'error'].forEach(type => {Message[type] = options => {if (typeof options === 'string') {options = {message: options};}options.type = type;return Message(options);};
});

所以，为了实现需求，我们在Vue.use(ElementUI)之前重写这一套方法

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';const messages = ['success', 'warning', 'info', 'error'];messages.forEach(type => {ElementUI.Message[type] = options => {if (typeof options === 'string') {options = {message: options};// 默认配置options.duration = 5000;options.showClose = true;}options.type = type;return ElementUI.Message(options);};
})Vue.use(ElementUI, { size: 'small' });

ElementUI全局配置message的弹窗时间相关推荐

vue --- 全局配置过滤函数,使用moment函数来格式化时间
效果1 YYYY-MM-DD 效果2 YYYY-MM-DD HH:mm:ss 配置注意事项由于时间格式化,在大多数页面中都会用到,因此建议配置在全局中使用moment函数 -> http:/ ...
vue-element-admin使用CDN引入element-ui时改变全局配置(size,zIndex)
element-ui在npm或CDN引入的情况下,分别如何修改默认全局配置开发环境npm引入element-ui 参考官方文档,直接更改配置即可生产环境CDN引入element-ui 参考的是这篇 ...
IDEA 2022 常用插件安装与全局配置教程大全
IDEA 2022 常用插件安装与全局配置教程大全文章目录 IDEA 2022 常用插件安装与全局配置教程大全一. 安装必备插件 1. Codota 代码智能提示插件 2. ...
SAP UI5 应用的全局配置(Global Configuration) 的设计和使用试读版
一套适合 SAP UI5 初学者循序渐进的学习教程作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...
Spring Cloud Alibaba - 14 OpenFeign自定义配置 + 调用优化 + 超时时间
文章目录打印Feign调用日志日志级别三部曲 step1 添加Feign的自定义配置 step2 声明式接口指定配置 Step3 声明式接口包日志级别调整为DEBUG 验证基于yml文件细粒度 ...
get request uni 参数_uni-app 环境配置，uni.request封装，接口配置，全局配置，接口调用的封装...
1.环境配置 (可参考uni-官网的环境配置) common文件夹下新建config.js let url_config = "" if(process.env.NODE_ENV ...
第三百八十一节，Django+Xadmin打造上线标准的在线教育平台—xadmin全局配置
第三百八十一节,Django+Xadmin打造上线标准的在线教育平台-xadmin全局配置 1.xadmin主题设置要使用xadmin主题,需要在一个app下的adminx.py后台注册文件里,写一 ...
axios （get，post，put，delete），常用配置，全局配置，axios.create(config)配置一个新的axios
目录 axios 的理解和应用 axios 特点: 使用 axios 发 ajax请求 1. 发送 GET 请求 axios get完整版: axios get精简版: axios get请求发送时携 ...
nginx的全局配置和HTTP相关配置
目录资源类型: 网站访问量网站访问量统计的重要指标 HTTP1.0和1.1的问题 HTTP2协议 HTTP 请求访问的完整过程 HTTP 请求报文 http协议状态码分类 http协议常用的!!状 ...
Vue2.0 内置指令directives 与全局配置过滤filters
内置指令directives 除了核心功能默认内置的指令 (例如 v-model 和 v-show),Vue 也允许注册自定义指令. 你仍然需要对普通 DOM 元素进行底层操作 ...

ElementUI全局配置message的弹窗时间

ElementUI全局配置message的弹窗时间相关推荐

最新文章

热门文章