ConfirmBox
Demos
The title and content are both customizable.
<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 } from 'veui'
import toast from 'veui/managers/toast'
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 the confirm box is displayed. |
title | string | - | The title of the confirm box. |
overlay-class | string|Array|Object | - | See the overlay-class prop of Overlay . |
Slots
Name | Description |
---|---|
default | The content of the confirm box. |
title | The title of the confirm box. Will ignore title prop when specified. |
foot | The foot area of the confirm box. Displays an “OK” and a “Cancel” button by default. |
Events
Name | Description |
---|---|
ok | Triggered when the “OK” button is clicked. |
cancel | Triggered when the “Cancel” button is clicked. |
afterclose | Triggered after the box overlay is closed. If leaving transition is provided by the theme, the event will be triggered after the transition completes. |