Dialog

ElDialog 弹窗拓展

示例

Props

Name	Description	Type	Options	Default
v-model	是否显示 Dialog	boolean	-	-
draggable	是否可拖拽窗口	boolean	-	true
show-full-screen	是否显示全屏图标，如果是自定义title插槽该属性无效	boolean	-	true
fixed-height	是否固定弹窗内容高度	boolean	-	false
confirm-props	确定按钮属性，见下方confirm-props	object	-	{text: '确定', show: true, type: 'primary'}
cancel-props	确定按钮属性，见下方confirm-props	object	-	{text: '取消', show: true, type: 'default'}
auto-width	是否启用自动计算宽度。详情见下方auto-width	boolean	-	true
width-config	自动计算宽度配置。	object	-	{ xs: '90%', sm: '80%', md: '70%', lg: '60%', xl: '50%', }
cancel-close	是否点击取消按钮的时候关闭弹窗	boolean	-	true
before-close	关闭前的回调，会暂停 Dialog 的关闭，如果没有传值，那么直接关闭弹窗	function(done)，done 用于关闭 Dialog	-	-
helper-message	显示提示信息内容，不为空的时候显示ElTooltip 组件	`string	string[]`	-
loading	弹窗内容是否显示 loading	boolean	-	false

提示

支持ElDialog属性

auto-width实现方式：先获取到电脑屏幕的宽度，然后转换成 Bootstrap 的 响应式设计的五个响应尺寸：xs、sm、md、lg 和 xl。这些响应式尺寸可以通过 width-config 来配置。你传入的匹配会和width-config默认的配置合并。

需要注意的是：如果你设置了width属性，那么 auto-width 和 width-config 两个属性无效

Confirm & Cancel Props

参数	说明	类型	可选值	默认值
label	按钮文案	string	-	确定/取消
show	是否显示	boolean	-	true

支持 ElButton 属性

Slots

Name	Description
footer-before	取消按钮前的自定义内容
footer-after	取消按钮之后的自定义内容
header	Dialog 标题区的内容

不支持 ElDialog 的 footer 插槽

Evetns

Name	Description	参数
confirm	点击确定按钮的回调	-
cancel	点击取消按钮的回调，注意：会先关闭弹窗，可以通过 cancel-close 属性来取消	-

支持 ElDialog事件