Alert
Statically display blocks for tips or warnings, which can be dynamically dismissed.
Basic Usage
Simply insert content using the default slot.
<template>
<div>
<b-alert>info alert</b-alert>
<b-alert type="success">success alert</b-alert>
<b-alert type="warning">warning alert</b-alert>
<b-alert type="error">error alert</b-alert>
</div>
</template>With Description
Customize description content by inserting via #desc.
我是描述Info...
我是描述Info...
我是描述Info...
我是描述Info...
<template>
<div>
<b-alert>
info alert
<template #desc>我是描述Info...</template>
</b-alert>
<b-alert type="success">
success alert
<template #desc>我是描述Info...</template>
</b-alert>
<b-alert type="warning">
warning alert
<template #desc>我是描述Info...</template>
</b-alert>
<b-alert type="error">
error alert
<template #desc>我是描述Info...</template>
</b-alert>
</div>
</template>icon
Different icons are automatically added based on the type property, or you can customize icons via the slot.
<template>
<div>
<b-alert show-icon>info alert</b-alert>
<b-alert type="success" show-icon>success alert</b-alert>
<b-alert type="warning" show-icon>warning alert</b-alert>
<b-alert type="error" show-icon>
error alert
<template #desc>Custom error description copywriting.</template>
</b-alert>
<b-alert show-icon>
Customicon
<template #icon>
<b-icon name="smile"></b-icon>
</template>
<template #desc>Customicon描述</template>
</b-alert>
</div>
</template>Can disable
Set closable to make the alert dismissible
No longer prompt
<template>
<div>
<b-alert closable>An info prompt</b-alert>
<b-alert type="success" show-icon closable>
A success prompt
<template #desc>
Content of prompt. Content of prompt. Content of prompt. Content of prompt.
</template>
</b-alert>
<b-alert type="warning" closable>
Custom closing content
<template #close>No longer prompt</template>
</b-alert>
</div>
</template>Top Banner Style
Set banner to apply a top banner style.
<template>
<div>
<b-alert banner>公告style...</b-alert>
<b-alert banner closable type="warning">公告style...</b-alert>
</div>
</template>Props
| Parameter | Description | Type | Options | Default |
|---|---|---|---|---|
| type | WarningTipstyle | String | info、success、warning、error | info |
| closable | Whether it can be dismissed | Boolean | — | false |
| show-icon | Whether to show icon | Boolean | — | false |
Events
| Event Name | Description | Return Value |
|---|---|---|
| close | Triggers when dismissed | event |
Slot
| Name | Description |
|---|---|
| default | Warning/alert content |
| desc | Supplementary description text |
| icon | Custom icon content |
| close | Custom close content |