当前位置：首页 > VUE

vue实现消息通告

2026-01-16 07:45:48VUE

Vue 实现消息通告的方法

消息通告通常用于展示系统通知、公告或提示信息。以下是几种常见的实现方式：

使用 Vue 原生组件

通过 Vue 的 v-if 或 v-show 控制消息通告的显示与隐藏：

vue实现消息通告

<template>
  <div class="announcement" v-if="showAnnouncement">
    {{ message }}
    <button @click="closeAnnouncement">关闭</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showAnnouncement: true,
      message: '系统维护通知：预计今晚 10 点进行系统升级'
    }
  },
  methods: {
    closeAnnouncement() {
      this.showAnnouncement = false
    }
  }
}
</script>

<style>
.announcement {
  padding: 10px;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}
</style>

使用 Vue 插件

Element UI 或 Ant Design Vue 等 UI 框架提供了现成的消息通知组件：

<template>
  <div>
    <el-button @click="showNotify">显示通告</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    showNotify() {
      this.$notify({
        title: '通告',
        message: '这是一条系统通告',
        duration: 5000
      })
    }
  }
}
</script>

全局消息通告组件

创建可复用的全局通告组件：

vue实现消息通告

创建 Announcement.vue 组件
在 main.js 中全局注册
通过事件总线或 Vuex 控制显示

// main.js
import Vue from 'vue'
import Announcement from './components/Announcement.vue'

Vue.component('announcement', Announcement)

定时自动消失的通告

结合 setTimeout 实现自动关闭：

export default {
  data() {
    return {
      show: true
    }
  },
  mounted() {
    setTimeout(() => {
      this.show = false
    }, 3000)
  }
}

带动画效果的通告

使用 Vue 的过渡动画：

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

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

根据具体需求选择合适的方法，简单的通告可使用原生 Vue 实现，复杂场景可考虑 UI 框架或自定义全局组件。