提示框

v-alert 组件用于通过使用上下文类型图标和颜色向用户传达重要信息。这些默认类型有 4 种变量：success，info，warning 和 error。 默认图标可代表每种类型所传达的不同意思。 也可以自定义提示框的许多部分，例如 border, icon, 和 color 以适应几乎所有情况。

用例

最简单形式的提示框显示消息时是一个扁平的 sheets of paper。

Alerts（提示框） - 图1

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Alerts（提示框） - 图2

示例

下面是一些简单到复杂的例子。

类型

type 属性提供 4 种默认的 v-alert 样式：success, info, warning, 和 error。每个样式都提供默认图标和颜色。默认颜色可通过 Vuetify’s theme 进行全局配置。

template

  1. <template>
  2.   <div>
  3.     <v-alert type="success">
  4.       I'm a success alert.
  5.     </v-alert>
  7.     <v-alert type="info">
  8.       I'm an info alert.
  9.     </v-alert>
  11.     <v-alert type="warning">
  12.       I'm a warning alert.
  13.     </v-alert>
  15.     <v-alert type="error">
  16.       I'm an error alert.
  17.     </v-alert>
  18.   </div>
  19. </template>

Alerts（提示框） - 图3

边框

border 属性支持将一个简单的边框添加到提示框的 4 个边。这可以和 color, dark, type 这些属性一起使用来为提示框提供强调作用。

template

  1. <template>
  2.   <div>
  3.     <v-alert
  4.       border="top"
  5.       color="red lighten-2"
  6.       dark
  7.     >
  8.       I'm an alert with a top border and red color
  9.     </v-alert>
  10.     <v-alert
  11.       border="right"
  12.       color="blue-grey"
  13.       dark
  14.     >
  15.       I'm an alert with a right border and blue-grey color
  16.     </v-alert>
  17.     <v-alert
  18.       border="bottom"
  19.       color="pink darken-1"
  20.       dark
  21.     >
  22.       I'm an alert with a bottom border and pink color
  23.     </v-alert>
  24.     <v-alert
  25.       border="left"
  26.       color="indigo"
  27.       dark
  28.     >
  29.       I'm an alert with a border left type info
  30.     </v-alert>
  31.   </div>
  32. </template>

Alerts（提示框） - 图4

彩色边框

colored-border prop 会移除警报背景，以突出 border prop 。如果设置了 type，它将使用类型的默认颜色。如果没有设置 color 或 type，颜色将默认为所应用的主题的反色（黑色代表浅色，白色/灰色代表深色）。

template

  1. <template>
  2.   <div>
  3.     <v-alert
  4.       border="left"
  5.       colored-border
  6.       color="deep-purple accent-4"
  7.       elevation="2"
  8.     >
  9.       Aliquam eu nunc. Fusce commodo aliquam arcu. In consectetuer turpis ut velit. Nulla facilisi..
  11.       Morbi mollis tellus ac sapien. Fusce vel dui. Praesent ut ligula non mi varius sagittis. Vivamus consectetuer hendrerit lacus. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi.
  12.     </v-alert>
  13.     <v-alert
  14.       border="top"
  15.       colored-border
  16.       type="info"
  17.       elevation="2"
  18.     >
  19.       Vestibulum ullamcorper mauris at ligula. Nam pretium turpis et arcu. Ut varius tincidunt libero. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Morbi nec metus.
  20.     </v-alert>
  21.     <v-alert
  22.       border="bottom"
  23.       colored-border
  24.       type="warning"
  25.       elevation="2"
  26.     >
  27.       Sed in libero ut nibh placerat accumsan. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis.
  28.     </v-alert>
  29.     <v-alert
  30.       border="right"
  31.       colored-border
  32.       type="error"
  33.       elevation="2"
  34.     >
  35.       Fusce commodo aliquam arcu. Pellentesque posuere. Phasellus tempus. Donec posuere vulputate arcu.
  36.     </v-alert>
  37.   </div>
  38. </template>

Alerts（提示框） - 图5

密集

dense 属性会降低提示框的高度来制造出一个简单且紧凑的风格。如果和 border 属性一起使用，那么边界高度也会一起降低来保持风格统一。

template

  1. <template>
  2.   <div>
  3.     <v-alert
  4.       dense
  5.       type="info"
  6.     >
  7.       I'm a dense alert with a <strong>type</strong> of info
  8.     </v-alert>
  9.     <v-alert
  10.       dense
  11.       text
  12.       type="success"
  13.     >
  14.       I'm a dense alert with the <strong>text</strong> prop and a <strong>type</strong> of success
  15.     </v-alert>
  16.     <v-alert
  17.       dense
  18.       border="left"
  19.       type="warning"
  20.     >
  21.       I'm a dense alert with the <strong>border</strong> prop and a <strong>type</strong> of warning
  22.     </v-alert>
  23.     <v-alert
  24.       dense
  25.       outlined
  26.       type="error"
  27.     >
  28.       I'm a dense alert with the <strong>outlined</strong> prop and a <strong>type</strong> of error
  29.     </v-alert>
  30.   </div>
  31. </template>

Alerts（提示框） - 图6

可关闭

dismissible 属性将会在提示框的尾部添加一个关闭按钮。点击此按钮将会将它的值设置为 false 且隐藏提示框。你也能够通过绑定 v-model 的值为 true 来恢复提示框。关闭图标会自动应用 aria-label，可以通过修改 close-label 属性或者改变本地设置 close 的值来进行更改它。浏览 Internationalization page 来了解如何全局修改你本地设置。

template script

  1. <template>
  2.   <div>
  3.     <v-alert
  4.       v-model="alert"
  5.       border="left"
  6.       close-text="Close Alert"
  7.       color="deep-purple accent-4"
  8.       dark
  9.       dismissible
  10.     >
  11.       Aenean imperdiet. Quisque id odio. Cras dapibus. Pellentesque ut neque. Cras dapibus.
  13.       Vivamus consectetuer hendrerit lacus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Curabitur blandit mollis lacus. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
  14.     </v-alert>
  15.     <div class="text-center">
  16.       <v-btn
  17.         v-if="!alert"
  18.         color="deep-purple accent-4"
  19.         dark
  20.         @click="alert = true"
  21.       >
  22.         Reset
  23.       </v-btn>
  24.     </div>
  25.   </div>
  26. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         alert: true,
  6.       }
  7.     },
  8.   }
  9. </script>

Alerts（提示框） - 图7

图标

icon 属性允许你在提示框的开头添加图标。如果提供了 type，那么将会覆盖默认类型的图标。 此外设置 icon 属性为 false 将会完全移除图标。

template

  1. <template>
  2.   <div>
  3.     <v-alert
  4.       color="#2A3B4D"
  5.       dark
  6.       icon="mdi-firework"
  7.       dense
  8.     >
  9.       Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Vivamus quis mi. Quisque ut nisi. Maecenas malesuada.
  11.     </v-alert>
  12.     <v-alert
  13.       color="#C51162"
  14.       dark
  15.       icon="mdi-material-design"
  16.       border="right"
  17.     >
  18.       Phasellus blandit leo ut odio. Morbi mattis ullamcorper velit. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. In ut quam vitae odio lacinia tincidunt.
  19.     </v-alert>
  20.     <v-alert
  21.       color="primary"
  22.       dark
  23.       icon="mdi-vuetify"
  24.       border="left"
  25.       prominent
  26.     >
  27.       Praesent congue erat at massa. Nullam vel sem. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Curabitur at lacus ac velit ornare lobortis.
  28.     </v-alert>
  29.   </div>
  30. </template>

Alerts（提示框） - 图8

Blog Free

A simple template that features a clean interface for creating a blog or blog-like application.

ads by Vuetify

](https://blog-free.johnleider.com?ref=vuetifyjs.com)

轮廓

outlined 属性将会反转提示框的风格，它会继承当前应用的 color 并应用与文本和边框且将其背景透明化。

template

  1. <template>
  2.   <div>
  3.     <v-alert
  4.       outlined
  5.       color="purple"
  6.     >
  7.       <div class="title">Lorem Ipsum</div>
  8.       <div>Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Duis vel nibh at velit scelerisque suscipit. Praesent blandit laoreet nibh. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros.</div>
  9.     </v-alert>
  10.     <v-alert
  11.       outlined
  12.       type="success"
  13.       text
  14.     >
  15.       Praesent venenatis metus at tortor pulvinar varius. Aenean commodo ligula eget dolor. Praesent ac massa at ligula laoreet iaculis. Vestibulum ullamcorper mauris at ligula.
  16.     </v-alert>
  17.     <v-alert
  18.       outlined
  19.       type="warning"
  20.       prominent
  21.       border="left"
  22.     >
  23.       Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Suspendisse non nisl sit amet velit hendrerit rutrum. Nullam vel sem. Pellentesque dapibus hendrerit tortor.
  24.     </v-alert>
  25.   </div>
  26. </template>

Alerts（提示框） - 图9

突出

prominent 属性通过增加高度并向图标施加光晕来提供更明显的提示。当同时应用 prominent 和 dense 时，提示框将会呈现出普通的风格但是会 prominent 图标特效。

template

  1. <template>
  2.   <div>
  3.     <v-alert
  4.       prominent
  5.       type="error"
  6.     >
  7.       <v-row align="center">
  8.         <v-col class="grow">Nunc nonummy metus. Nunc interdum lacus sit amet orci. Nullam dictum felis eu pede mollis pretium. Cras id dui.</v-col>
  9.         <v-col class="shrink">
  10.           <v-btn>Take action</v-btn>
  11.         </v-col>
  12.       </v-row>
  13.     </v-alert>
  14.     <v-alert
  15.       color="blue-grey"
  16.       dark
  17.       dense
  18.       icon="mdi-school"
  19.       prominent
  20.     >
  21.       Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Aenean ut eros et nisl sagittis vestibulum. Sed aliquam ultrices mauris. Donec vitae orci sed dolor rutrum auctor.
  22.     </v-alert>
  23.     <v-alert
  24.       icon="mdi-shield-lock-outline"
  25.       prominent
  26.       text
  27.       type="info"
  28.     >
  29.       Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Sed in libero ut nibh placerat accumsan.. Curabitur blandit mollis lacus. Curabitur blandit mollis lacus.
  30.     </v-alert>
  31.   </div>
  32. </template>

Alerts（提示框） - 图10

文本

text 属性是一个简单的提示框变量，它对所提供的颜色使用不透明的背景。 类似于其他样式的属性，text 可与 dense, prominent 和 outlined 等其他属性结合使用，以创建独特的定制组件。

template

  1. <template>
  2.   <div>
  3.     <v-alert
  4.       text
  5.       color="info"
  6.     >
  7.       <h3 class="headline">Lorem Ipsum</h3>
  8.       <div>Maecenas nec odio et ante tincidunt tempus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Curabitur turpis.</div>
  10.       <v-divider
  11.         class="my-4 info"
  12.         style="opacity: 0.22"
  13.       ></v-divider>
  15.       <v-row
  16.         align="center"
  17.         no-gutters
  18.       >
  19.         <v-col class="grow">Proin magna. Vivamus in erat ut urna cursus vestibulum. Etiam imperdiet imperdiet orci.</v-col>
  20.         <v-spacer></v-spacer>
  21.         <v-col class="shrink">
  22.           <v-btn
  23.             color="info"
  24.             outlined
  25.           >
  26.             Okay
  27.           </v-btn>
  28.         </v-col>
  29.       </v-row>
  30.     </v-alert>
  31.     <v-alert
  32.       text
  33.       outlined
  34.       color="deep-orange"
  35.       icon="mdi-fire"
  36.     >
  37.       Nullam tincidunt adipiscing enim. In consectetuer turpis ut velit. Maecenas egestas arcu quis ligula mattis placerat. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus.
  38.     </v-alert>
  39.     <v-alert
  40.       text
  41.       dense
  42.       color="teal"
  43.       icon="mdi-clock-fast"
  44.       border="left"
  45.     >
  46.       Vestibulum ullamcorper mauris at ligula. Nulla porta dolor. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Curabitur at lacus ac velit ornare lobortis.
  47.     </v-alert>
  48.     <v-alert
  49.       text
  50.       prominent
  51.       type="error"
  52.       icon="mdi-cloud-alert"
  53.     >
  54.       Praesent blandit laoreet nibh. Praesent nonummy mi in odio. Phasellus tempus. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Duis leo.
  55.     </v-alert>
  56.   </div>
  57. </template>

Alerts（提示框） - 图11

过渡

transition 属性可让你向提示框应用一个过渡，该动画在隐藏和显示组件时可见。你可以在 Vuetify’s prebuilt transitions 浏览更多信息或者查看如何 create your own。

template script

  1. <template>
  2.   <div>
  3.     <div class="text-center mb-4">
  4.       <v-btn
  5.         color="primary"
  6.         @click="alert = !alert"
  7.       >
  8.         Toggle
  9.       </v-btn>
  10.     </div>
  11.     <v-alert
  12.       :value="alert"
  13.       color="pink"
  14.       dark
  15.       border="top"
  16.       icon="mdi-home"
  17.       transition="scale-transition"
  18.     >
  19.       Phasellus tempus. Fusce ac felis sit amet ligula pharetra condimentum. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Pellentesque posuere. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
  21.       Phasellus nec sem in justo pellentesque facilisis. Phasellus magna. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. In hac habitasse platea dictumst. Praesent turpis.
  22.     </v-alert>
  23.   </div>
  24. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         alert: true,
  6.       }
  7.     },
  8.   }
  9. </script>

Alerts（提示框） - 图12

Twitter 提醒

通过将 color、dismissible、border、elevation、icon 和 colored-border props 组合在一起，你可以创建时尚的自定义提醒，比如这个 twitter 通知。

template script

  1. <template>
  2.   <div>
  3.     <v-alert
  4.       v-model="alert"
  5.       dismissible
  6.       color="cyan"
  7.       border="left"
  8.       elevation="2"
  9.       colored-border
  10.       icon="mdi-twitter"
  11.     >
  12.       You've got <strong>5</strong> new updates on your timeline!.
  13.     </v-alert>
  15.     <div class="text-center">
  16.       <v-btn
  17.         v-if="!alert"
  18.         dark
  19.         @click="alert = true"
  20.       >
  21.         Reset Alert
  22.       </v-btn>
  23.     </div>
  24.   </div>
  25. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         alert: true,
  6.       }
  7.     },
  8.   }
  9. </script>

Alerts（提示框） - 图13

无障碍

默认情况下，v-alert 被分配到 alert 的 WAI-ARIA 作用，这表示提示框是一个活动区域，包含重要且通常对时间敏感的信息。当使用 dismissible 属性时，关闭图标将会接受相应的 aria-label。可以通过修改 close-label 属性来修改它或者全局自定义 Internationalization 默认值来修改 close 属性。