docs_vue2/one/docs/components/dialog.md

Dialog 对话框

示例

模态与非模态

自定义内容

异步支持

可拖拽

层叠顺序

API

属性

名称	类型	默认值	描述
ui	string=	-	[^ui]
modal	boolean=	true	是否是模态对话框。模态对话框默认遮挡底层（无法点击）且抢占焦点（关闭后焦点会回归）。
title	string=	-	对话框标题文本。如果指定了 title 插槽，则优先使用 title 插槽。
open	boolean	false	[^open]
closable	boolean=	true	是否显示关闭按钮。
outside-closable	boolean=	false	点击对话框外部时是否关闭对话框。
draggable	boolean=	false	是否可拖拽。
escapable	boolean=	false	按下 esc 键是否可以关闭对话框。仅在 closable 为 true 时生效。
inline	boolean=	false	是否内联在内容中显示并占用内容空间。
footless	boolean=	false	是否不显示默认的底部操作栏。
loading	boolean=	false	是否处于加载状态。处于加载状态时确定按钮也将进入加载状态，无法点击。
priority	number=	-	对话框浮层层叠权重，参考 Overlay 组件的 priority 属性。
before-close	`function(string): boolean=	Promise<boolean=>`	-
overlay-class	`string	Object=`	-

^^^ui 预设样式。

+++枚举值

值	描述
s	小内容尺寸（内容及部件尺寸，非对话框整体空间大小）。
m	中内容尺寸（内容及部件尺寸，非对话框整体空间大小）。
narrow	窄尺寸样式。
medium	中尺寸样式。
wide	宽尺寸样式。
fullscreen	全屏尺寸样式。
auto	自适应尺寸样式。
+++
^^^

^^^open :::badges .sync :::

是否显示对话框。 ^^^

^^^before-close 在将触发对话框关闭的操作发生后执行，类型为 function(type: string): boolean=|Promise<boolean=>。type 为触发关闭的类型，默认情况下可选值为 'ok'|'cancel'。返回值可以是一个 boolean，也可以是一个 resolve boolean 的 Promise，用来处理可能需要异步决定对话框关闭状态的情况。返回值或 resolve 值非 false 时才会关闭对话框。

+++调用示例

<veui-dialog :open.sync="dialogOpen" :before-close="submit">...</veui-dialog>

methods: {
  submit (type) {
    if (type === 'ok') {
      return axios.post('/item/create', {/* ... */})
        .then(({ id, error }) => {
          if (error) {
            this.showError(error)
            return false // resolve `false` 将阻止对话框关闭
          }
        })
    }
    // resolve 但不返回 `false` 时会关闭对话框
  },
  // ...
}

+++ ^^^

插槽

名称	描述
default	内容区。
title	标题区。若同时指定了 title 属性和 title 插槽，以后者为准。
foot	[^slot-foot]

^^^slot-foot 底部区域，默认会展示“确定”、“取消”按钮。

+++作用域参数

名称	类型	描述
close	function(type: string): void	触发对话框关闭的回调函数。type 为关闭的类型，将作为参数传入 before-close 钩子函数作为参数，同时将同步触发同名的事件。
+++
^^^

事件

名称	描述
ok	点击“确定”按钮时或通过调用作用域函数 close('ok') 时触发。
cancel	点击“取消”按钮、关闭按钮、通过 esc 关闭对话框时，或者通过调用作用域函数 close('cancel') 时触发。
<value>	通过调用作用域函数 close(value) 时触发。
afterclose	浮层关闭后触发。如果样式主题提供了退出动画，将在退出动画完毕后触发。

图标

名称	描述
close	关闭。