vue消息通知实现

Vue 消息通知实现方法

使用第三方库（推荐）

推荐使用 element-ui、ant-design-vue 或 vant 等 UI 框架内置的通知组件，快速实现功能。

以 element-ui 为例：

// 安装 element-ui
npm install element-ui

// 在 main.js 中引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

// 在组件中使用
this.$notify({
  title: '提示',
  message: '这是一条消息通知',
  type: 'success',
  duration: 3000
});

自定义通知组件

若需完全自定义，可创建一个全局通知组件。

创建 Notification.vue：

<template>
  <div class="notification" :class="type" v-if="show">
    {{ message }}
  </div>
</template>

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

<style>
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px 20px;
  border-radius: 4px;
  color: white;
  z-index: 9999;
}
.info {
  background-color: #1890ff;
}
.success {
  background-color: #52c41a;
}
.error {
  background-color: #f5222d;
}
</style>

注册为全局组件：

// 在 main.js 中
import Notification from './components/Notification.vue';
Vue.component('Notification', Notification);

// 使用示例
this.$notify({
  message: '自定义通知',
  type: 'success'
});

使用 Vuex 管理通知状态

对于复杂应用，可通过 Vuex 集中管理通知状态。

创建 Vuex store：

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

在组件中使用：

this.$store.dispatch('showNotification', {
  message: 'Vuex 管理的通知',
  type: 'info'
});

动画效果增强

为通知添加过渡动画，提升用户体验。

修改 Notification.vue：

<template>
  <transition name="slide-fade">
    <div class="notification" :class="type" v-if="show">
      {{ message }}
    </div>
  </transition>
</template>

<style>
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>

多通知队列处理

当需要显示多个通知时，可实现队列机制。

修改 Vuex store：

actions: {
  showNotification({ commit, state }, notification) {
    commit('addNotification', notification);
    if (state.notifications.length === 1) {
      this.dispatch('processQueue');
    }
  },
  processQueue({ commit, state }) {
    if (state.notifications.length > 0) {
      setTimeout(() => {
        commit('removeNotification', 0);
        this.dispatch('processQueue');
      }, state.notifications[0].duration || 3000);
    }
  }
}