当前位置：首页 > VUE

实现vue message

2026-01-08 02:16:15VUE

实现 Vue 消息提示组件

创建 Message 组件 在 src/components 目录下创建 Message.vue 文件，内容如下：

<template>
  <transition name="fade">
    <div v-if="visible" class="message" :class="type">
      {{ content }}
    </div>
  </transition>
</template>

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

<style scoped>
.message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 4px;
  color: white;
  z-index: 9999;
}

.info {
  background-color: #1890ff;
}

.success {
  background-color: #52c41a;
}

.warning {
  background-color: #faad14;
}

.error {
  background-color: #f5222d;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

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

创建插件文件 在 src/plugins 目录下创建 message.js 文件：

import Vue from 'vue'
import Message from '@/components/Message.vue'

const MessageConstructor = Vue.extend(Message)

const message = (options = {}) => {
  const instance = new MessageConstructor({
    data: options
  })
  instance.$mount()
  document.body.appendChild(instance.$el)
  instance.show(options.content, options.type, options.duration)
}

export default {
  install(Vue) {
    Vue.prototype.$message = message
  }
}

注册插件 在 main.js 中注册插件：

import Vue from 'vue'
import Message from '@/plugins/message'

Vue.use(Message)

使用方式 在组件中调用：

this.$message({
  content: '这是一条提示消息',
  type: 'success',
  duration: 2000
})

// 或简写形式
this.$message.success('操作成功')
this.$message.error('操作失败')

扩展方法 在 message.js 中添加快捷方法：

['success', 'warning', 'info', 'error'].forEach(type => {
  message[type] = (content, duration = 2000) => {
    return message({
      content,
      type,
      duration
    })
  }
})

全局挂载 如果需要全局挂载而非在每个组件中通过 this 调用：

// 在 message.js 中
const message = {
  install(Vue) {
    Vue.prototype.$message = messageFunction
  }
}

// 在 main.js 中
import message from '@/plugins/message'
Vue.use(message)
window.message = message

实现vue message