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

最新推荐文章于 2025-09-11 04:35:46 发布

原创最新推荐文章于 2025-09-11 04:35:46 发布 · 1.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#ui #vue.js #javascript

Element 专栏收录该内容

59 篇文章

订阅专栏

在 Element UI（针对 Vue 2）和 Element Plus（针对 Vue 3）中，Notification 通知组件通常不是作为一个可以直接在模板中使用的组件提供的，而是通过全局方法或服务来调用的。下面我将分别介绍在 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中如何使用 Notification。

Vue 2 + Element UI

在 Vue 2 的 Element UI 中，你可以通过 $notify 方法来调用 Notification。

方法

$notify(options)：显示一个通知。

options 参数：

title：标题。
message：消息内容。
type：通知类型，如 success、warning、info、error。
duration：显示时间，单位为毫秒，默认值为 4500 毫秒。设置为 0 则不会自动关闭。
offset：距离屏幕顶部的偏移量。
position：自定义弹出位置，如 top-right、top-left、bottom-right、bottom-left。
closeButton：是否显示关闭按钮。
onClose：关闭时的回调函数。

示例：

<template>
  <el-button @click="showNotification">显示通知</el-button>
</template>

<script>
export default {
  methods: {
    showNotification() {
      this.$notify({
        title: '通知',
        message: '这是一条通知消息',
        type: 'success',
        duration: 3000
      });
    }
  }
};
</script>

Vue 3 + Element Plus

在 Vue 3 的 Element Plus 中，虽然具体的 API 可能会有些许不同，但基本的使用方式应该与 Vue 2 中的 Element UI 类似。你可能需要通过 ElNotification 服务来调用通知。

方法

ElNotification(options)：显示一个通知。

options 参数（假设与 Element UI 类似）：

类似 Vue 2 中的 options 参数，但具体属性可能会根据 Element Plus 的更新而有所变化。

示例（假设 Element Plus 提供了类似的 API）：

<template>
  <el-button @click="showNotification">显示通知</el-button>
</template>

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

const showNotification = () => {
  ElNotification({
    title: '通知',
    message: '这是一条通知消息',
    type: 'success',
    duration: 3000
  });
};
</script>

注意：由于 Element Plus 还在不断发展中，具体的 API 和使用方法可能会有所不同。务必参考 Element Plus 的官方文档以获取最准确的信息和示例。

此外，Element Plus 可能会提供更丰富的配置选项和更灵活的用法，因此建议查阅官方文档以获取最新的信息和示例代码。