当前位置：首页 > VUE

vue 消息提醒实现

2026-03-30 01:14:17VUE

实现 Vue 消息提醒的常见方法

使用 Vue 插件（如 Element UI、Vant 等） Element UI 的 this.$message 或 Vant 的 Toast 组件可直接调用，适合快速集成。例如：

vue 消息提醒实现

// Element UI
this.$message.success('操作成功');

// Vant
import { Toast } from 'vant';
Toast('提示内容');

自定义全局消息组件 创建一个全局注册的 Message 组件，通过 Vue 的 extend 动态挂载。示例代码：

vue 消息提醒实现

// Message.vue 组件模板
<template>
  <div class="message" v-if="show">{{ text }}</div>
</template>

// main.js 注册全局方法
Vue.prototype.$showMessage = function(text, duration = 2000) {
  const MessageClass = Vue.extend(Message);
  const instance = new MessageClass({ propsData: { text } });
  instance.$mount();
  document.body.appendChild(instance.$el);
  setTimeout(() => instance.show = false, duration);
};

基于事件总线的轻量级方案 通过 Vue.prototype.$bus 派发事件，在布局层监听显示消息。适合小型项目：

// main.js
Vue.prototype.$bus = new Vue();

// 组件A触发
this.$bus.$emit('show-message', '需要提示的文字');

// 根组件监听
this.$bus.$on('show-message', text => {
  this.message = text;
  this.showMessage = true;
  setTimeout(() => this.showMessage = false, 1500);
});

动画增强体验 为消息添加过渡动画提升视觉效果，使用 Vue 的 <transition>：

<transition name="fade">
  <div v-if="show" class="message">{{ text }}</div>
</transition>

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