docs_vue2/one/docs/en-US/components/dialog.md

Dialog

Demos

Sizes and fullscreen

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

Modal and non-modal

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.

+++Scope properties

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).
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.