Alert 提示
Alert 用于在页面中展示重要的提示信息。VISTA B 直接使用 Element Plus 的 el-alert，它不属于浮层元素，不会自动消失，适合固定显示的状态提醒、规则说明和风险提示。
基础用法
Alert 提供 5 种类型，通过 type 设置，默认值为 info。
vue
<el-alert title="Primary alert" type="primary" />
<el-alert title="Success alert" type="success" />
<el-alert title="Info alert" type="info" />
<el-alert title="Warning alert" type="warning" />
<el-alert title="Error alert" type="error" />主题
通过 effect 设置主题，支持 light 和 dark，默认值为 light。
vue
<el-alert title="Primary alert" type="primary" effect="dark" />
<el-alert title="Success alert" type="success" effect="dark" />
<el-alert title="Info alert" type="info" effect="dark" />
<el-alert title="Warning alert" type="warning" effect="dark" />
<el-alert title="Error alert" type="error" effect="dark" />自定义关闭按钮
通过 closable 控制是否可关闭，通过 close-text 替换右侧关闭图标。关闭时会触发 close 事件。
vue
<script setup>
const hello = () => {
console.log('Alert closed')
}
</script>
<template>
<el-alert title="Unclosable alert" type="success" :closable="false" />
<el-alert title="Customized close text" type="info" close-text="Gotcha" />
<el-alert title="Alert with callback" type="warning" @close="hello" />
</template>使用图标
设置 show-icon 后，会显示和类型匹配的图标；也可以通过 icon 插槽自定义图标。
vue
<script setup>
import { Bell } from '@element-plus/icons-vue'
</script>
<template>
<el-alert title="Primary alert" type="primary" show-icon />
<el-alert title="Error alert with custom icon" type="error" show-icon>
<template #icon>
<Bell />
</template>
</el-alert>
</template>文字居中
设置 center 后，提示内容会水平居中，常用于短句提示。
vue
<el-alert title="Primary alert" type="primary" center show-icon />
<el-alert title="Success alert" type="success" center show-icon />
<el-alert title="Info alert" type="info" center show-icon />文字描述
除 title 外，可以通过 description 添加更详细的辅助说明。描述文本过长时会自动换行。
vue
<el-alert
title="With description"
type="success"
description="This is a description."
/>带图标和描述
show-icon 可以和 description 一起使用，让提示层级更清晰。
vue
<el-alert
title="Warning alert"
type="warning"
description="More text description"
show-icon
/>典型场景
Alert 常用于固定展示的规则、结果和风险信息，不适合作为自动消失的消息提示。
vue
<el-alert
title="存在逾期风险"
type="warning"
description="该项目距离交付节点不足 3 天，请尽快确认排期。"
show-icon
:closable="false"
/>API
Alert 属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
title | Alert 标题 | string | '' |
type | Alert 类型 | primary / success / info / warning / error | info |
description | 描述性文本 | string | '' |
closable | 是否可以关闭 | boolean | true |
center | 文字是否居中 | boolean | false |
close-text | 自定义关闭按钮文本 | string | '' |
show-icon | 是否显示类型图标 | boolean | false |
effect | 主题样式 | light / dark | light |
Alert 事件
| 事件 | 说明 | 类型 |
|---|---|---|
close | 关闭 Alert 时触发 | (event: MouseEvent) => void |
Alert 插槽
| 插槽 | 说明 |
|---|---|
default | Alert 内容描述 |
title | 自定义标题内容 |
icon | 自定义图标内容 |
使用提醒
- Alert 用于页面内固定提示，不用于自动消失的轻量反馈；自动反馈优先使用 Message。
- 单页内同一类提示要保持一致的
type语义，避免warning和error混用。 - 文案较长时使用
description，标题保持短句，方便用户快速扫描。