ConfirmBox
Examples
Custom title and content area.
<template>
<article>
<veui-button @click="open = true">
Remove
</veui-button>
<veui-confirm-box
title="System Notification"
:open.sync="open"
@ok="ok"
@cancel="cancel"
>
<p>Are you sure to remove the item?</p>
</veui-confirm-box>
</article>
</template>
<script>
import { ConfirmBox, Button, toast } from 'veui'
export default {
components: {
'veui-confirm-box': ConfirmBox,
'veui-button': Button
},
data () {
return {
open: false
}
},
methods: {
ok () {
this.open = false
toast.info('Confirmed')
},
cancel () {
toast.info('Canceled')
}
}
}
</script>
API
Props
Name | Type | Default | Description |
---|---|---|---|
open | boolean | false |
Whether to show the confirm box. |
title | string | - | Title. |
loading | boolean | false | Whether the dialog is in loading state. When in loading state, the OK button will also be in loading state and cannot be clicked. |
disabled | boolean | false | Whether the dialog is disabled. When disabled, the OK button will also be disabled and cannot be clicked. |
ok-label | string | - | The text content of the "OK" button. |
cancel-label | string | - | The text content of the "Cancel" button. |
before-close | function(string): boolean=|Promise<boolean> | - | Executed after the operation that triggers the close. Refer to the before-close prop of the Dialog component. |
overlay-class | string | Array | Object | - | Refer to the overlay-class prop of the Overlay component. |
overlay-style | string | Array | Object | - | Refer to the overlay-style prop of the Overlay component. |
Slots
Name | Description |
---|---|
default | Content area. |
title | Title area. If both the title prop and the title slot are specified, the latter will take precedence. |
foot | Footer area. The "OK" and "Cancel" buttons will be displayed by default. |
Events
Name | Description |
---|---|
ok | Triggered when the "OK" button is clicked. |
cancel | Triggered when the "Cancel" button is clicked. |
afteropen | Triggered after the dialog is opened. The dialog content will not be rendered until after the event is triggered. So if there is logic that depends on content rendering, execute it after this event is triggered. |
afterclose | Triggered after the dialog is closed. If the style theme provides an exit animation, it will be triggered after the animation is complete. |