Dialog

Demos

Sizes and fullscreen

Available size/dimension variants for the ui prop: s / m / narrow / medium / wide / auto.

Customized content

Async support

Draggable

Stacking order

API

Props

Name	Type	Default	Description
`ui`	`string=`	-	[^ui]
`modal`	`boolean=`	`true`	Whether to display a backdrop to block interactions with the content underneath. Modal dialogs preempt focus by default (will return focus when closed).
`title`	`string=`	-	The title of the dialog. Will be ignored if `title` slot is specified.
`open`	`boolean=`	`false`	[^open]
`closable`	`boolean=`	`true`	Whether to display a close button at the top right corner.
`outside-closable`	`boolean=`	`false`	Wether to close the dialog when user click outside.
`draggable`	`boolean=`	`false`	Whether the dialog is draggable.
`escapable`	`boolean=`	`false`	Whether to allow closing the dialog after pressing `esc`. Only works when `closable` is set to `true`.
`inline`	`boolean=`	`false`	Whether the dialog is displayed inline thus takes up space.
`footless`	`boolean=`	`false`	Whether to hide the default footer.
`loading`	`boolean=`	`false`	Wehter the dialog is in loading state. When loading, the OK button will enter loading state as well and become unclickable.
`disabled`	`boolean=`	`false`	Wehter the dialog is disabled. When disabled, the OK button will be disabled as well and become unclickable.
`ok-label`	`string=`	-	The text content of the “OK” button.
`cancel-label`	`string=`	-	The text content of the “Cancel” button.
`priority`	`number=`	-	The stacking priority of the dialog overlay. See the `priority` prop of `Overlay` component.
`before-close`	`function(string): boolean=	Promise<boolean=>`	-
`overlay-class`	`string	Object=`	-
`overlay-style`	`string	Array	Object=`

^^^ui Style variants.

+++Enum values

Value	Description
`s`	Small sized content (not the dimension of the dialog itself).
`m`	Medium sized content (not the dimension of the dialog itself).
`narrow`	Narrow width.
`medium`	Medium width.
`wide`	Wide width.
`fullscreen`	Fullscreen dialogs.
`auto`	Auto-fit dialogs.
+++
^^^

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

Whether the dialog is open. ^^^

^^^before-close Executed when user interaction is about to trigger closing the dialog. The type is function(type: string): boolean=|Promise<boolean=>, where type being the action type of the closing behavior. Available values by default are 'ok'/'cancel'. The return value can be a boolean or a Promise that resolves a boolean value, to handle the situation that an async process is responsible for deciding whether to close the dialog. Will keep the dialog open when returning false or the Promise resolves with false.

+++Code example

<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 // resolving `false` will keep the dialog open
          }
        })
    }
    // resolving non-`false` value will close the dialog
  },
  // ...
}

+++ ^^^

Slots

Name	Description
`default`	The content of the dialog.
`title`	The title of the dialog. Will ignore the `title` prop if this slot is specified.
`foot`	[^slot-foot]

^^^slot-foot The foot of the dialog. Displays “OK” and “Cancel” buttons by default.

+++Slot props

Name	Type	Description
`close`	`function(type: string): void`	The callback to trigger closing the dialog. `type` is the action type and will be passed into `before-close` hook as the first argument. And an event named after `type` will be triggered synchronously.
+++
^^^

Events

Name	Description
`ok`	Triggered after the “OK” button is clicked or the dialog is closed with the slot scope function call `close('ok')`.
`cancel`	Triggered after the “Cancel” button or the close button is clicked, or `esc` is pressed, or the dialog is closed with the slot scope function call `close('cancel')`.
`<value>`	Triggered when the dialog is closed with the slot scope function call `close(value)`.
`afteropen`	Triggered after the dialog is opened. The dialog content won't be rendered until after the dialog is opened, so if there is logic that depends on content rendering, please execute it after this event is triggered.
`afterclose`	Triggered after the dialog is closed. If leave transition is provided by theme, then `afterclose` will be triggered when the transition finishes.

Icons

Name	Description
`close`	Close.

5.7 KiB Raw Blame History