AlertBox
Examples
Types
AlertBox
has three type variants: info
, success
, and error
, which can be specified by the type
prop.
<template>
<article>
<veui-button @click="successOpen = true">
Success
</veui-button>
<veui-button @click="errorOpen = true">
Error
</veui-button>
<veui-button @click="infoOpen = true">
Info
</veui-button>
<veui-alert-box
type="success"
:open.sync="successOpen"
>
<template #title>
Success
</template>
<div>Saved successfully!</div>
</veui-alert-box>
<veui-alert-box
type="error"
:open.sync="errorOpen"
>
<template #title>
Error
</template>
<div>Not enough disk space!</div>
</veui-alert-box>
<veui-alert-box
type="info"
:open.sync="infoOpen"
>
<template #title>
Sytstem
</template>
<div>The total available storage is 5MB.</div>
</veui-alert-box>
</article>
</template>
<script>
import { AlertBox, Button } from 'veui'
export default {
components: {
'veui-alert-box': AlertBox,
'veui-button': Button
},
data () {
return {
successOpen: false,
errorOpen: false,
infoOpen: false
}
}
}
</script>
<style lang="less" scoped>
.veui-button {
margin-right: 10px;
}
</style>
With title
The title of the alert box can be customized using the title
prop or the title
slot.
<template>
<article>
<veui-button @click="open1 = true">
title prop
</veui-button>
<veui-button @click="open2 = true">
title slot
</veui-button>
<veui-alert-box
type="success"
:open.sync="open1"
title="Success"
@ok="ok"
>
<p>Saved successfully!</p>
</veui-alert-box>
<veui-alert-box
type="success"
:open.sync="open2"
@ok="ok"
>
<template #title>
Success
<veui-icon name="info-circle"/>
</template>
<p>Saved successfully!</p>
</veui-alert-box>
</article>
</template>
<script>
import { AlertBox, Button, Icon, toast } from 'veui'
import 'veui-theme-dls-icons/info-circle'
export default {
components: {
'veui-alert-box': AlertBox,
'veui-button': Button,
'veui-icon': Icon
},
data () {
return {
open1: false,
open2: false
}
},
methods: {
ok () {
toast.info('Confirmed')
}
}
}
</script>
<style lang="less" scoped>
.veui-button {
margin-right: 10px;
}
.icon {
vertical-align: -2px;
}
</style>
API
Props
Name | Type | Default | Description | ||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
open | boolean | false |
Whether to display the alert box. | ||||||||
type | string | 'success' | The contextual type of the alert box.
| ||||||||
title | string | - | The title of the alert box. | ||||||||
loading | boolean | false | Whether the alert box is in the loading state. When in the loading state, the OK button will also enter the loading state and cannot be clicked. | ||||||||
disabled | boolean | false | Whether the alert box 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. | ||||||||
before-close | function(string): boolean=|Promise<boolean> | - | Executes after the operation that triggers the close, see before-close prop of the Dialog component for reference. | ||||||||
overlay-class | string | Array | Object | - | See the overlay-class prop of the Overlay component for reference. | ||||||||
overlay-style | string | Array | Object | - | See the overlay-style prop of the Overlay component for reference. |
Slots
Name | Description |
---|---|
default | Content area. |
title | Title area. If both the title prop and the title slot are specified, the latter takes precedence. |
foot | Footer area. By default, an “OK” button is displayed. |
Events
Name | Description |
---|---|
ok | Triggered when the “OK” button is clicked. |
afteropen | Triggered after the alert box is opened. The alert box content is only rendered after opening, so if there is logic that depends on content rendering, execute it after this event is triggered. |
afterclose | Triggered after the alert box is closed. If the theme provides an exit animation, it will be triggered after the exit animation is completed. |
Icons
Name | Description |
---|---|
info | Normal information. |
success | Success state. |
error | Error state. |