Alert 提示

用于页面中展示重要的提示信息。

基础用法

Alert 组件不属于浮层元素，不会自动消失或关闭。

Alert 组件提供四种类型，由 type 属性指定，默认值为 info。

Alert 提示 - 图1

  1. <template>
  2.   <el-alert title="success alert" type="success" />
  3.   <el-alert title="info alert" type="info" />
  4.   <el-alert title="warning alert" type="warning" />
  5.   <el-alert title="error alert" type="error" />
  6. </template>
  8. <style scoped>
  9. .el-alert {
  10.   margin: 20px 0 0;
  11. }
  12. .el-alert:first-child {
  13.   margin: 0;
  14. }
  15. </style>

主题

Alert 组件提供了两个不同的主题：light和dark。

通过设置effect属性来改变主题，默认为light。

Alert 提示 - 图2

  1. <template>
  2.   <el-alert title="success alert" type="success" effect="dark" />
  3.   <el-alert title="info alert" type="info" effect="dark" />
  4.   <el-alert title="warning alert" type="warning" effect="dark" />
  5.   <el-alert title="error alert" type="error" effect="dark" />
  6. </template>
  7. <style scoped>
  8. .el-alert {
  9.   margin: 20px 0 0;
  10. }
  11. .el-alert:first-child {
  12.   margin: 0;
  13. }
  14. </style>

自定义关闭按钮

你可以自定义关闭按钮为文字或其他符号。

你可以设置 Alert 组件是否为可关闭状态， 关闭按钮的内容以及关闭时的回调函数同样可以定制。 closable 属性决定 Alert 组件是否可关闭， 该属性接受一个 Boolean，默认为 false。 你可以设置 close-text 属性来代替右侧的关闭图标， 需要注意的是 close-text 必须是一个字符串。 当 Alert 组件被关闭时会触发 close 事件。

Alert 提示 - 图3

  1. <template>
  2.   <el-alert title="unclosable alert" type="success" :closable="false" />
  3.   <el-alert title="customized close-text" type="info" close-text="Gotcha" />
  4.   <el-alert title="alert with callback" type="warning" @close="hello" />
  5. </template>
  7. <script lang="ts" setup>
  8. const hello = () => {
  9.   // eslint-disable-next-line no-alert
  10.   alert('Hello World!')
  11. }
  12. </script>
  13. <style scoped>
  14. .el-alert {
  15.   margin: 20px 0 0;
  16. }
  17. .el-alert:first-child {
  18.   margin: 0;
  19. }
  20. </style>

使用图标

你可以通过为 Alert 组件添加图标来提高可读性。

通过设置 show-icon 属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。

Alert 提示 - 图4

  1. <template>
  2.   <el-alert title="success alert" type="success" show-icon />
  3.   <el-alert title="info alert" type="info" show-icon />
  4.   <el-alert title="warning alert" type="warning" show-icon />
  5.   <el-alert title="error alert" type="error" show-icon />
  6. </template>
  7. <style scoped>
  8. .el-alert {
  9.   margin: 20px 0 0;
  10. }
  11. .el-alert:first-child {
  12.   margin: 0;
  13. }
  14. </style>

文字居中

使用 center 属性来让文字水平居中。

Alert 提示 - 图5

  1. <template>
  2.   <el-alert title="success alert" type="success" center show-icon />
  3.   <el-alert title="info alert" type="info" center show-icon />
  4.   <el-alert title="warning alert" type="warning" center show-icon />
  5.   <el-alert title="error alert" type="error" center show-icon />
  6. </template>
  7. <style scoped>
  8. .el-alert {
  9.   margin: 20px 0 0;
  10. }
  11. .el-alert:first-child {
  12.   margin: 0;
  13. }
  14. </style>

文字描述

为 Alert 组件添加一个更加详细的描述来使用户了解更多信息。

除了必填的 title 属性外，你可以设置 description 属性来帮助你更好地介绍，我们称之为辅助性文字。 辅助性文字只能存放文本内容，当内容超出长度限制时会自动换行显示。

Alert 提示 - 图6

  1. <template>
  2.   <el-alert
  3.     title="with description"
  4.     type="success"
  5.     description="This is a description."
  6.   />
  7. </template>

带图标和描述

在最后, 这是一个带有图标和描述的例子。

Alert 提示 - 图7

  1. <template>
  2.   <el-alert
  3.     title="success alert"
  4.     type="success"
  5.     description="more text description"
  6.     show-icon
  7.   />
  8.   <el-alert
  9.     title="info alert"
  10.     type="info"
  11.     description="more text description"
  12.     show-icon
  13.   />
  14.   <el-alert
  15.     title="warning alert"
  16.     type="warning"
  17.     description="more text description"
  18.     show-icon
  19.   />
  20.   <el-alert
  21.     title="error alert"
  22.     type="error"
  23.     description="more text description"
  24.     show-icon
  25.   />
  26. </template>
  27. <style scoped>
  28. .el-alert {
  29.   margin: 20px 0 0;
  30. }
  31. .el-alert:first-child {
  32.   margin: 0;
  33. }
  34. </style>

Alert API

Alert 属性

名称说明类型默认值必填
titleAlert 标题。string—否
typeAlert 类型。‘success’ | ‘warning’ | ‘info’ | ‘error’‘info’否
description描述性文本string—否
closable是否可关闭booleantrue否
center文字是否居中booleanfalse否
close-text自定义关闭按钮文本string—否
show-icon是否显示类型图标booleanfalse否
effect主题样式‘light’ | ‘dark’‘light’否

Alert 事件

名称描述类型
close关闭 Alert 时触发的事件(evt: MouseEvent) => void

Alert 插槽

名称描述
defaultAlert 内容描述
title标题的内容

源代码

组件 Alert 提示 - 图8 • 文档 Alert 提示 - 图9

贡献者

Alert 提示 - 图10 三咲智子

Alert 提示 - 图11 云游君

Alert 提示 - 图12 JeremyWuuuuu

Alert 提示 - 图13 C.Y.Kun

Alert 提示 - 图14 Aex

Alert 提示 - 图15 류한경

Alert 提示 - 图16 Xc

Alert 提示 - 图17 Delyan Haralanov

Alert 提示 - 图18 bqy

Alert 提示 - 图19 波比小金刚

Alert 提示 - 图20 btea

Alert 提示 - 图21 Sleepy Five

Alert 提示 - 图22 on the field of hope

Alert 提示 - 图23 Hades-li