【区分vue2和vue3下的element UI Alert 警告组件，分别详细介绍属性，事件，方法如何使用，并举例】

原创已于 2024-06-25 08:58:23 修改 · 1.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#ui #vue.js #javascript

于 2024-06-25 08:38:12 首次发布

Element 专栏收录该内容

59 篇文章

订阅专栏

在 Vue 2 中，Element UI 提供了一个 Alert 警告组件，用于显示警告信息。然而，在 Vue 3 中，由于 Element UI 官方并未直接支持，你可能需要使用 Element Plus，这是 Element UI 的 Vue 3 版本。下面，我将分别为 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 介绍 Alert 组件的属性、事件和方法，并给出使用示例。

Vue 2 + Element UI 中的 Alert 组件

属性 (Attributes)

title: 警告的标题。
type: 警告的类型，可选值为 success、warning、info、error。默认为 info。
description: 警告的描述文字。
closable: 是否可关闭，默认为 true。
close-text: 自定义关闭按钮的文本。
show-icon: 是否显示图标，默认为 false。

事件 (Events)

close: 当 Alert 关闭时会触发该事件。

方法 (Methods)

在 Element UI 的 Alert 组件中，通常不直接提供可调用的方法。

示例

<template>
  <el-alert
    title="成功提示"
    type="success"
    description="这是一条成功提示的文案"
    :closable="false"
    show-icon
  ></el-alert>
</template>

<script>
export default {
  // Vue 2 组件的其他选项...
};
</script>

Vue 3 + Element Plus 中的 Alert 组件

属性 (Props)

title: 警告的标题。
type: 警告的类型，可选值为 success、warning、info、error。默认为 info。
description: 警告的描述文字。
closable: 是否可关闭，默认为 true。
close-text: 自定义关闭按钮的文本。
show-icon: 是否显示图标，默认为 false。

事件 (Events)

close: 当 Alert 关闭时会触发该事件。你可以通过 @close 来监听这个事件。

方法 (Methods)

与 Element UI 类似，Element Plus 的 Alert 组件也不直接提供可调用的方法。

示例

<template>
  <el-alert
    title="成功提示"
    type="success"
    description="这是一条成功提示的文案"
    :closable="false"
    show-icon
    @close="handleClose"
  ></el-alert>
</template>

<script setup>
import { ElAlert } from 'element-plus';

const handleClose = () => {
  console.log('Alert 组件已关闭');
};
</script>

在 Vue 3 的示例中，我使用了 <script setup> 语法，这是 Vue 3 提供的一种新的组件编写方式，它使得代码更加简洁。同时，我导入了 ElAlert 组件，并定义了一个 handleClose 方法来处理 close 事件。

请注意，虽然 Element UI 和 Element Plus 在组件的属性和事件上保持了很大的相似性，但它们在实现细节和内部机制上有所不同，因为 Vue 3 引入了很多新的特性和改进。因此，在使用时请确保你查阅了对应版本的官方文档。