当前位置：首页 > VUE

vue 消息提醒实现

2026-01-19 19:26:55VUE

使用 Vue 的 `$notify` 方法（Element UI）

Element UI 提供了一个 $notify 方法，可以快速实现消息提醒功能。确保项目中已安装 Element UI。

this.$notify({
  title: '提示',
  message: '这是一条消息提醒',
  type: 'success'
});

支持的类型包括 success、warning、info 和 error。可以通过 duration 参数设置自动关闭的延迟时间（毫秒）。

自定义通知组件

如果需要高度自定义的通知，可以创建一个独立的 Vue 组件，通过事件总线或 Vuex 控制显示。

// Notification.vue
<template>
  <div v-if="show" class="notification">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      message: ''
    };
  },
  methods: {
    display(msg) {
      this.message = msg;
      this.show = true;
      setTimeout(() => {
        this.show = false;
      }, 3000);
    }
  }
};
</script>

在全局或父组件中调用 this.$refs.notification.display('消息内容')。

使用第三方库（如 Toastification）

Vue Toastification 是一个轻量级的通知库，提供丰富的配置选项。

安装：

npm install vue-toastification

配置：

import Toast from 'vue-toastification';
import 'vue-toastification/dist/index.css';

Vue.use(Toast);

使用：

this.$toast.success('操作成功');
this.$toast.error('发生错误');

支持位置、动画、持续时间等参数定制。

浏览器原生通知（Notification API）

利用浏览器原生 Notification API 实现系统级提醒，需用户授权。

if (Notification.permission === 'granted') {
  new Notification('标题', { body: '消息内容' });
} else if (Notification.permission !== 'denied') {
  Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
      new Notification('标题', { body: '消息内容' });
    }
  });
}

注意：此方法仅在 HTTPS 或 localhost 环境下有效。

动画效果增强

为消息提醒添加过渡动画，提升用户体验。

vue 消息提醒实现

<transition name="fade">
  <div v-if="showNotification" class="notification">
    {{ notificationMessage }}
  </div>
</transition>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

通过调节过渡时间和效果，可以实现淡入淡出、滑动等动画。