警告框
v-alert 组件是通过整体性的使用类型，图标和颜色来向用户传递重要信息的组件。
使用
警告框使用了特殊版本的 v-sheet 组件来吸引用户的注意力。它和 v-banner 在功能上类似，不同的是 v-alert 和内容是内联 (inline) 布局，且在应用中可以多次使用。
API
| 组件 | 描述 |
|---|---|
| v-alert | 主要组件 |
| v-alert-title | 用来显示 v-alert 组件的标题的子组件。也可以用 #title 插槽实现。 |
组件结构
v-alert 中元素的推荐放置是：
- 在最左边放置
v-icon - 将
v-alert-title置于整体性图标右边 - 将文本内容放在标题下方
- 将关闭操作放在最右边
| 元素 / 区域 | 描述 |
|---|---|
| 1. 容器 | 包含了所有 v-alert 组件的警告框容器 |
| 2. 图标 | 展示警告框的整体含义的图标；例如 success, info, warning, error |
| 3. 标题 | 某个增大字号的标题文字 |
| 4. 文字 | 显示文本和其他内联元素的区域 |
| 5. 关闭图标（可选） | 用于隐藏 v-alert 组件 |
指南
v-alert 组件是一个呼叫元素，旨在吸引用户的注意力。与v-banner不同，v-alert 组件旨在在整个应用程序中被使用和重复使用。警报的颜色由其 type 属性派生，该属性对应于您应用程序的上下文主题颜色 和图标字体别名。
属性
除了标准的 v-sheet 所支持的强调效果和圆角效果。v-alert 组件还支持 v-model，variants 和 density 属性。
内容
v-alert 组件支持使用 title 和 text 属性的简单内容。这种方法适用于不需要自定义样式的字符串。
以下代码片段是一个基本的 v-alert 组件示例，只包含文本：
<v-alert text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus..."></v-alert>添加标题就像定义其值一样简单。下一个例子添加了一个字符串标题，以配合内容文本：
注意警报没有颜色或图标。这是使用 type 属性定义的。
类型
警报有四种上下文状态：成功、信息、警告和错误。每个状态都有与之关联的默认颜色和图标。当没有提供 类型 时，v-alert 组件默认为灰色背景。
有了基本的警报呈现，添加你选择的上下文类型。以下示例将 v-alert 组件放在成功状态下：
Type reference
| Type | Color | Icon alias | Icon |
|---|---|---|---|
| Success | success | $success | |
| Info | info | $info | |
| Warning | warning | $warning | |
| Error | error | $error |
颜色和图标
type 属性充当颜色和图标组合的简写，你可以单独使用这两个属性来达到相同的效果。以下示例通过定义自定义颜色并使用图标查找表来获取全局定义的成功图标，产生与使用 type="success" 相同的结果：
<v-alert
color="success"
icon="$success"
title="Alert title"
text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus..."
></v-alert>密度
v-alert 组件具有使用 density 属性按间隔减小其高度的能力。当您需要减少组件所需的垂直空间时，这非常有用。以下示例使用 density="compact" 减少了垂直空间：
density 属性支持三个级别的组件高度：默认、舒适和紧凑。
变体
v-alert 具有6种样式变体，分别是elevated、flat、tonal、outlined、text 和 plain。默认情况下，v-alert 组件是 flat 的；这意味着它具有实心背景和没有阴影（海拔）。以下示例使用自定义变体修改了警报的整体样式：
可关闭
closable 属性在主内容之后的最右边添加了一个 v-icon。这个控件在点击时隐藏 v-alert，将其内部模型设置为 false。通过绑定 v-model 或使用 model-value 来手动控制警报的可见性。以下示例使用动态模型显示和隐藏 v-alert 组件：
关闭图标自动应用默认的 aria-label，并可通过使用 close-label 属性或更改你的区域设置中的 close 值进行配置。
INFO
要了解如何全局修改您的区域设置，请导航至 国际化页面.
其他例子
以下是一组 v-alert 示例，演示了不同属性在应用程序中的工作方式。
边框颜色
border-color 属性移除了警报的背景，以突出边框属性。如果设置了类型，它将使用类型的默认颜色。如果没有设置颜色或类型，则颜色将默认为应用主题的反色（浅色主题为黑色，深色主题为白色/灰色）。
图标
icon 属性允许您在警报组件的开头添加图标。如果提供了类型，则这将覆盖默认的类型图标。此外，将 icon 属性设置为 false 将完全删除图标。
轮廓
outlined 属性将会反转提示框的风格，它会继承当前应用的 color 并应用与文本和边框且将其背景透明化。
无障碍
默认情况下，v-alert 组件被分配了 WAI-ARIA 角色 alert，表示警报“是一个具有重要且通常是时间敏感信息的活动区域”。当使用 closable 属性时，关闭图标将收到相应的 aria-label。这个值可以通过更改 close-label 属性或通过自定义国际化的默认值来进行修改。