ElementUI的Dialog和MessageBox的默认属性修改方法
本文主要讲下如何修改 ElementUI 的 Dialog 和 MessageBox 的默认属性。主要包括以下几个方面:
- Dialog 和 MessageBox 简介;
- 修改单次调用的默认属性;
- 全局修改默认属性:
3.1 Dialog 全局修改默认属性;
3.2 MessageBox 全局修改默认属性。
以下例子以修改close-on-click-modal
属性为例进行讲解。这个属性的默认值是true
,也就是点击蒙层的时候弹框关闭。在实际项目中,我们一般不想要这个默认行为,所以拿这个属性举例。
Dialog 和 MessageBox 简介
Dialog 是一个组件 Component。
MessageBox 这个名字虽然咋一看也像是组件名,但是却是一个方法名。
我试着猜测了下 MessageBox 没有做成组件的原因。根据官网的介绍:
A set of modal boxes simulating system message box, mainly for alerting information, confirm operations and prompting messages.
MessageBox 主要是为了模仿系统原生的弹框,而系统原生弹框的 API 是window.alert
,window.confirm
和window.prompt
,这些都是方法。所以,可能是为了和原生 API 保持一致的使用方式,所以把 MessageBox 做成了对应的方法:MessageBox.alert
,MessageBox.confirm
和MessageBox.prompt
。此外,还有一个基础的 MessageBox 方法也可以调用。这四个方法也挂载到了 Vue 原型上,分别是$alert
,$confirm
,$prompt
和$msgbox
:
原生 API | MessageBox 方法名 | Vue 实例方法名 |
---|---|---|
– | MessageBox | $msgbox |
window.alert | MessageBox.alert | $alert |
window.confirm | MessageBox.confirm | $confirm |
window.prompt | MessageBox.prompt | $prompt |
正因为 Dialog 和 MessageBox 本质是不一样的,所以修改默认属性的方式也就不一样了,下面会针对这两种类型分别进行说明。
修改单次调用的默认属性
修改单次调用的默认属性就比较简单了,Dialog 组件通过属性的方式修改:close-on-click-modal
<el-dialog ... :close-on-click-modal="false"> ... </el-dialog>
MessageBox 通过传参的方式修改:
// $alert, $confirm, $prompt 方法与下面类似 this.$msgbox({ ... closeOnClickModal: false })
全局修改默认属性
在这里,首先说下我解决这个问题的思路:
- 直接搜索,大部分问题都能搜到解决方案;
- 搜不到或者别人的方法不适用时,查看源码。
我有一个习惯,如果开发时间还算宽裕的话,即使搜到了现成的解决方案,我还是会对照源码探索下为什么这个方案是可行的。下面的解决方案都对照源码验证过,所以就直接对照源码讲解决方案以及对应源码的位置。
本文涉及到的源码以 v2.15.1 版本为例。
Dialog 全局修改默认属性
Dialog 组件源码位于/packages/dialog
文件夹下面github 地址。
查看/packages/dialog/component.vue文件会发现closeOnClickModal
是一个 props:
props: { // ... closeOnClickModal: { type: Boolean, default: true // 默认值是 true }, // ... }
全局修改方式如下:
import Element from 'element-ui' Element.Dialog.props.closeOnClickModal.default = false
MessageBox 全局修改默认属性
首先看下/src/index.js文件中和 MessageBox 相关的代码:
// ... import MessageBox from '../packages/message-box/index.js'; // ... const install = function(Vue, opts = {}) { // ... Vue.prototype.$msgbox = MessageBox; // 对应于上面表格中的对应关系:MessageBox => $msgbox Vue.prototype.$alert = MessageBox.alert; // 对应于上面表格中的对应关系:MessageBox.alert => $alert Vue.prototype.$confirm = MessageBox.confirm; // 对应于上面表格中的对应关系:Message.confirm => $confirm Vue.prototype.$prompt = MessageBox.prompt; // 对应于上面表格中的对应关系:MessageBox.prompt => $prompt // ... } export default { // ... MessageBox, // ... }
接下来看下 MessageBox 的定义文件/packages/message-box/src/main.js,MessageBox 接受两个参数:options
和callback
,字面含义应该就是配置对象和回调函数:
const MessageBox = function(options, callback) { // ... };
我使用了$msgbox
,所以我的第一思路是修改$msgbox
方法,调用 MessageBox 的时候添加自定义参数:
import Element from 'element-ui' import Vue from 'vue' Vue.prototype.$msgbox = function (options, ...args) { options = Object.assign({ closeOnClickModal: false }, options) Element.MessageBox(options, ...args) }
测试了下,没有问题,但是仔细看了下源码,发现options
并不一定是对象,也可以是字符串:
const MessageBox = function(options, callback) { if (Vue.prototype.$isServer) return; if (typeof options === 'string' || isVNode(options)) { // 第一个参数是字符串的时候,当作 message options = { message: options }; if (typeof arguments[1] === 'string') { // 第二个参数是字符串的时候,当作 title options.title = arguments[1]; } } else if (options.callback && !callback) { callback = options.callback; } // ... }
我测试没有问题,是因为我调用的时候options
都是当对象使用的。所以这个方案是有限定范围的解决方案,并不是通用的。主要有以下问题:
options
必须是对象的形式;- 如果使用了
$alert
,$confirm
,$prompt
等方法,都需要做类似的处理,代码比较啰嗦; - 只能通过
$msgbox
的方式修改,如果你是直接调用的MessageBox
,那就不适用了,因为我并没有修改MessageBox
。
基于问题 1,你可以像 MessageBox 源码里面分析参数那样,创建一个合适的 options,然后传给 MessageBox。基于问题 3,暂时没有想到好的解决方案。
考虑到项目是团队合作的结果,万一有同学调用$msgbox
的时候第一个参数不是对象,或者直接通过MessageBox
调用,我就在考虑是否有更好的解决方案。仔细查看源码,发现一个更简单的 API:
MessageBox.setDefaults = defaults => { MessageBox.defaults = defaults; };
再重新看下 MessageBox 函数的源码:
const MessageBox = function(options, callback) { // ... if (typeof Promise !== 'undefined') { return new Promise((resolve, reject) => { // eslint-disable-line msgQueue.push({ options: merge({}, defaults, MessageBox.defaults, options), // 注意这一行 callback: callback, resolve: resolve, reject: reject }); showNextMsg(); }); } else { msgQueue.push({ options: merge({}, defaults, MessageBox.defaults, options), // 注意这一行 callback: callback }); showNextMsg(); } };
通过上面最终options
参数的计算方法,我们可以给 options 排下优先级:
函数调用时传入的 options > MessageBox.defaults > 组件默认值 options
所以,修改MessageBox.defaults
可以实现我们的目的:
import Element from 'element-ui' Element.MessageBox.setDefaults({ closeOnClickModal: false })
当然,该方法也并不是十分完美的,问题如下:
- 未在官方文档中发现该 API 的介绍,这种非官方 API严重依赖当前使用的版本,官方应该在后续迭代中不保证这种 API 的稳定性和正确性;
- MessageBox.alert 在调用 Message 的时候,默认覆盖了几个默认属性,这几个属性通过
MessageBox.setDefaults
方法修改不生效,比如设置 alert 框的 closeOnClickModal 为 true:MessageBox.alert = (message, title, options) => { // ... return MessageBox(merge({ // ... closeOnPressEscape: false, closeOnClickModal: false // 调用 MessageBox 时传入的 options 会覆盖 MessageBox.defaults }, options)); };
探索到这里,对于我来说,MessageBox.setDefaults
已经算是比较优的解决方案了,所以就不再继续探索了。
如果你还有更高的要求,比如修复问题 2,简单点,你可以覆盖这个默认方法或者探索更适合你的解决方案。
总结
希望大家能有所收获。如有错误,欢迎留言讨论。
码云笔记 » ElementUI的Dialog和MessageBox的默认属性修改方法