当前位置：首页 > VUE

vue实现消息通知功能

2026-02-21 07:44:18VUE

实现消息通知的基本思路

在Vue中实现消息通知功能通常涉及以下几个核心部分：创建通知组件、管理通知状态、触发通知显示与隐藏。以下是具体实现方法。

创建通知组件

创建一个独立的通知组件，用于显示通知内容。组件可以包含标题、消息内容和关闭按钮。

<template>
  <div class="notification" :class="type" v-if="show">
    <div class="notification-content">
      <h3>{{ title }}</h3>
      <p>{{ message }}</p>
    </div>
    <button @click="close">×</button>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    message: String,
    type: {
      type: String,
      default: 'info'
    },
    duration: {
      type: Number,
      default: 3000
    }
  },
  data() {
    return {
      show: false
    };
  },
  mounted() {
    this.show = true;
    setTimeout(() => {
      this.close();
    }, this.duration);
  },
  methods: {
    close() {
      this.show = false;
      this.$emit('closed');
    }
  }
};
</script>

<style>
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px;
  border-radius: 5px;
  background: #f8f9fa;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  z-index: 1000;
}

.notification.success {
  background: #d4edda;
  color: #155724;
}

.notification.error {
  background: #f8d7da;
  color: #721c24;
}

.notification button {
  margin-left: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
</style>

使用事件总线或Vuex管理通知

可以通过事件总线或Vuex全局管理通知状态，实现跨组件触发通知。

使用事件总线

创建一个全局事件总线，用于触发通知。

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

在需要触发通知的组件中：

import { EventBus } from './event-bus.js';

// 触发通知
EventBus.$emit('show-notification', {
  title: '成功',
  message: '操作成功完成',
  type: 'success'
});

在根组件或布局组件中监听事件：

import { EventBus } from './event-bus.js';

export default {
  data() {
    return {
      notifications: []
    };
  },
  created() {
    EventBus.$on('show-notification', (notification) => {
      this.notifications.push(notification);
    });
  }
};

使用Vuex

在Vuex中管理通知状态，并通过actions触发通知。

// store.js
export default new Vuex.Store({
  state: {
    notifications: []
  },
  mutations: {
    ADD_NOTIFICATION(state, notification) {
      state.notifications.push(notification);
    },
    REMOVE_NOTIFICATION(state, index) {
      state.notifications.splice(index, 1);
    }
  },
  actions: {
    showNotification({ commit }, notification) {
      commit('ADD_NOTIFICATION', notification);
      setTimeout(() => {
        commit('REMOVE_NOTIFICATION', 0);
      }, notification.duration || 3000);
    }
  }
});

在组件中触发通知：

this.$store.dispatch('showNotification', {
  title: '错误',
  message: '操作失败',
  type: 'error'
});

动态渲染通知列表

在根组件或布局组件中动态渲染通知列表。

<template>
  <div>
    <notification
      v-for="(notification, index) in notifications"
      :key="index"
      :title="notification.title"
      :message="notification.message"
      :type="notification.type"
      @closed="removeNotification(index)"
    />
  </div>
</template>

<script>
import Notification from './Notification.vue';

export default {
  components: { Notification },
  computed: {
    notifications() {
      return this.$store.state.notifications;
    }
  },
  methods: {
    removeNotification(index) {
      this.$store.commit('REMOVE_NOTIFICATION', index);
    }
  }
};
</script>

通知队列与动画效果

为通知添加动画效果，提升用户体验。

<template>
  <transition-group name="notification" tag="div">
    <notification
      v-for="(notification, index) in notifications"
      :key="notification.id"
      :title="notification.title"
      :message="notification.message"
      :type="notification.type"
      @closed="removeNotification(index)"
    />
  </transition-group>
</template>

<style>
.notification-enter-active,
.notification-leave-active {
  transition: all 0.5s ease;
}

.notification-enter,
.notification-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
</style>