警告组件 (Alert)

Element UI 的 Alert 组件用于在页面中展示重要的提示信息，通常用于向用户传达关键信息或者操作反馈。Alert 组件支持不同的主题、图标展示、关闭按钮定制等功能，能够适应多种使用场景。

提示

Alert 组件官方文档：https://element.eleme.cn/#/zh-CN/component/alert (opens new window)

1. 基本用法

基本语法：使用 <el-alert> 标签创建一个警告提示，通过 type 属性设置提示的主题类型，并通过 title 和 description 属性设置标题和描述内容。

<template>
  <el-alert
    title="成功提示"
    type="success"
    description="这是一条成功的提示信息"
    show-icon
    center
  ></el-alert>
</template>

<script>
export default {
  // 组件逻辑可以在这里编写
};
</script>

• title 属性：设置警告提示的标题，通常用于传达主要信息。
• type 属性：设置警告的主题类型。可选值为 success、warning、info、error，默认为 info。
• description 属性：设置辅助性文字，提供更多的描述信息。
• show-icon 属性：是否显示图标，默认不显示。
• center 属性：文字是否居中显示，默认不居中。
• 

2. Alert 属性

参数	说明	类型	可选值	默认值
title	标题	string	—	—
type	主题类型	string	success/warning/info/error	info
description	辅助性文字	string	—	—
closable	是否可关闭	boolean	—	true
center	文字是否居中	boolean	—	false
close-text	自定义关闭按钮的文本	string	—	—
show-icon	是否显示图标	boolean	—	false
effect	选择提供的主题	string	light/dark	light

• title：设置警告的标题文本，通常用于传达主要的提示信息。
• type：选择警告的主题类型，如成功（success）、警告（warning）、信息（info）或错误（error）。
• description：提供更多的描述性文字，帮助用户理解提示信息。
• closable：控制警告是否可关闭，默认情况下是可关闭的。
• center：文字内容是否居中显示，适用于需要特殊对齐的场景。
• close-text：自定义关闭按钮的文本，替代默认的关闭图标。
• show-icon：控制是否显示图标，通过图标进一步强调提示信息的类型。
• effect：选择提供的主题风格，可选值为 light 或 dark。

3. Alert 插槽

Alert 组件提供了几个插槽，用于自定义标题、描述以及更多内容：

插槽名	说明
—	默认描述内容
title	自定义标题内容

自定义标题和描述

你可以通过 title 和默认插槽来自定义警告的标题和描述内容。

<template>
  <el-alert type="warning" show-icon center>
    <template #title>
      <strong>警告提示</strong>
    </template>
    <span>这是一条自定义的警告描述信息。</span>
  </el-alert>
</template>

4. Alert 事件 (Events)

Alert 组件提供了 close 事件，当用户点击关闭按钮时会触发该事件。

事件名称	说明	回调参数
close	关闭警告时触发的事件	—

监听关闭事件

通过监听 close 事件，可以在用户关闭警告提示时执行特定的逻辑。

<template>
  <el-alert
    title="信息提示"
    type="info"
    description="这是一条信息提示"
    @close="handleClose"
  ></el-alert>
</template>

<script>
export default {
  methods: {
    handleClose() {
      this.$message.info("警告已关闭");
    },
  },
};
</script>

5. 常用示例

1. 成功提示

<el-alert
  title="成功"
  type="success"
  description="操作已成功完成"
  show-icon
></el-alert>

2. 警告提示

<el-alert
  title="警告"
  type="warning"
  description="请注意，这是一条警告信息"
  show-icon
  closable
></el-alert>

3. 错误提示

<el-alert
  title="错误"
  type="error"
  description="操作失败，请稍后重试"
  show-icon
  close-text="关闭"
></el-alert>

4. 中心对齐的提示信息

<el-alert
  title="重要提示"
  type="info"
  description="请仔细阅读以下信息"
  center
  show-icon
></el-alert>

5. 自定义主题效果

<el-alert
  title="黑暗模式警告"
  type="warning"
  description="这是一个黑暗模式下的警告信息"
  show-icon
  effect="dark"
></el-alert>

6. 自定义关闭按钮

在 Alert 组件中，你可以设置关闭按钮为文本或其他符号，并自定义关闭行为。closable 属性决定 Alert 是否可关闭，默认为 true。你还可以使用 close-text 属性替换默认的关闭图标，并通过 close 事件来设置关闭时的回调函数。

• 不可关闭的 Alert：通过将 closable 属性设置为 false，可以让警告提示无法被用户关闭。

• 自定义关闭文本：使用 close-text 属性替换默认的关闭图标，展示自定义的关闭文本（例如“知道了”）。

• 带回调函数的 Alert：通过 @close 事件监听警告的关闭行为，并在关闭时触发自定义回调函数（例如弹出一个提示框）。

<template>
  <div>
    <el-alert
      title="不可关闭的警告"
      type="success"
      :closable="false"
    ></el-alert>

    <el-alert
      title="自定义关闭文本"
      type="info"
      close-text="知道了"
    ></el-alert>

    <el-alert
      title="带回调函数的警告"
      type="warning"
      @close="handleClose"
    ></el-alert>
  </div>
</template>

<script>
export default {
  methods: {
    handleClose() {
      alert('Hello World!');
    }
  }
};
</script>

6. Alert 和 Message 的区别

Alert 组件的特点

• 固定位置：Alert 组件通常在页面的固定位置（如顶部、表单上方等）展示，直到用户手动关闭或页面刷新，不会自动消失。
• 页面内嵌：Alert 组件通常嵌入在页面布局中，用于向用户传达持续性、重要的提示信息，通常需要用户关注并理解信息后再继续操作。
• 交互性：Alert 组件可以通过 close 事件执行特定的操作，比如在关闭提示后执行某些逻辑。

Message 组件的特点

• 轻量级：Message 组件通常是短暂显示的，自动消失，不会占用页面的固定位置。适合用于即时的操作反馈，如成功、错误、警告等。
• 全局提示：Message 通常出现在页面的角落（默认右上角），适合用于通知用户某个操作结果，但不一定需要用户立即处理。
• 不可交互：Message 一般是不可交互的，仅用于信息提示。

什么时候选择 Message 或 Alert？

• 短暂性提示：当你只需要向用户传达一个短暂的提示信息，不需要占用页面空间或持久存在时，选择 Message。
• 持续性提示：当你需要展示一个需要用户明确注意的提示信息，而且希望这个信息在页面上持续存在，直到用户处理或关闭时，选择 Alert。
• 交互性：如果提示信息需要用户与之进行交互（如关闭操作后执行特定逻辑），Alert 通常更适合。