Dialog 对话框

示例

尺寸与全屏

可选的 ui 属性值：s/m/narrow/medium/wide/auto。

模态与非模态

自定义内容

异步支持

可拖拽

层叠顺序

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`	关闭。

4.5 KiB Raw Blame History