当前位置：首页 > VUE

vue 消息提醒实现

2026-02-18 00:45:04VUE

Vue 消息提醒实现方法

使用 Vue 自带的过渡和条件渲染

通过 v-if 或 v-show 控制消息提醒的显示与隐藏，结合 Vue 的过渡效果实现平滑动画。

<template>
  <transition name="fade">
    <div v-if="showAlert" class="alert">
      {{ message }}
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      showAlert: false,
      message: ''
    }
  },
  methods: {
    showMessage(msg) {
      this.message = msg
      this.showAlert = true
      setTimeout(() => {
        this.showAlert = false
      }, 3000)
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.alert {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background: #42b983;
  color: white;
  border-radius: 4px;
}
</style>

使用第三方库

Element UI 或 Vuetify 等 UI 框架提供了现成的消息提醒组件。

vue 消息提醒实现

Element UI 示例

vue 消息提醒实现

// 安装后全局引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

// 组件内使用
this.$message({
  message: '操作成功',
  type: 'success'
})

Vuetify 示例

// 安装后全局引入
import Vuetify from 'vuetify'
Vue.use(Vuetify)

// 组件内使用
this.$vuetify.theme.dark = true
this.$toast.show('Hello world!', { timeout: 2000 })

自定义全局消息组件

创建可复用的全局消息组件，通过 Vue 实例方法调用。

// Toast.vue
<template>
  <transition name="slide">
    <div v-if="visible" class="toast">
      {{ message }}
    </div>
  </transition>
</template>

// main.js
import Toast from './components/Toast'
const toast = {
  install(Vue) {
    Vue.prototype.$toast = function(msg, duration = 2000) {
      const ToastClass = Vue.extend(Toast)
      const instance = new ToastClass({
        propsData: { message: msg }
      })
      instance.$mount()
      document.body.appendChild(instance.$el)
      instance.visible = true
      setTimeout(() => {
        instance.visible = false
        setTimeout(() => {
          document.body.removeChild(instance.$el)
        }, 500)
      }, duration)
    }
  }
}
Vue.use(toast)

// 组件内使用
this.$toast('操作成功')