当前位置：首页 > VUE

vue框架实现消息提醒

2026-02-20 17:42:32VUE

Vue 框架实现消息提醒的方法

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

Element UI 提供了一个 $notify 方法，可以快速实现消息提醒功能。

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

type 可以是 success、warning、info 或 error，duration 控制显示时间（毫秒）。

自定义全局消息组件

创建一个全局的消息组件，通过 Vue 的插件机制注册，方便在任何地方调用。

消息组件 (Message.vue)

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

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

<style>
.message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 4px;
  z-index: 9999;
}
.info {
  background-color: #f4f4f5;
  color: #909399;
}
.success {
  background-color: #f0f9eb;
  color: #67c23a;
}
.error {
  background-color: #fef0f0;
  color: #f56c6c;
}
</style>

注册为插件

import Vue from 'vue';
import Message from './Message.vue';

const MessageConstructor = Vue.extend(Message);
const messageInstance = new MessageConstructor().$mount();

document.body.appendChild(messageInstance.$el);

Vue.prototype.$message = {
  show(text, type, duration) {
    messageInstance.display(text, type, duration);
  }
};

调用方式

this.$message.show('操作成功', 'success', 2000);

使用第三方库

Vue 生态中有许多专门的消息提醒库，如 vue-toastification 或 sweetalert2。

vue-toastification 示例 安装：

npm install vue-toastification

配置：

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

Vue.use(Toast, {
  position: 'top-right',
  timeout: 3000,
  closeOnClick: true,
  pauseOnFocusLoss: true,
  pauseOnHover: true,
  draggable: true,
  draggablePercent: 0.6,
  showCloseButtonOnHover: false,
  hideProgressBar: false,
  closeButton: 'button',
  icon: true,
  rtl: false
});

使用：

this.$toast.success('操作成功');
this.$toast.error('操作失败');

基于 Vuex 的状态管理

如果需要跨组件共享消息状态，可以使用 Vuex 管理消息。

Vuex Store

const store = new Vuex.Store({
  state: {
    message: null,
    messageType: null
  },
  mutations: {
    setMessage(state, { text, type }) {
      state.message = text;
      state.messageType = type;
    },
    clearMessage(state) {
      state.message = null;
      state.messageType = null;
    }
  },
  actions: {
    showMessage({ commit }, { text, type, duration = 3000 }) {
      commit('setMessage', { text, type });
      setTimeout(() => {
        commit('clearMessage');
      }, duration);
    }
  }
});

组件中使用

this.$store.dispatch('showMessage', {
  text: '操作成功',
  type: 'success'
});

显示消息的组件

vue框架实现消息提醒

<template>
  <div v-if="message" class="message" :class="messageType">
    {{ message }}
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['message', 'messageType'])
  }
};
</script>