当前位置：首页 > VUE

实现vue message

2026-03-07 14:32:55VUE

实现 Vue Message 组件

使用 Vue 3 Composition API 创建 Message 组件

创建一个 Message.vue 文件，定义组件的基本结构和样式

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

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  content: String,
  type: {
    type: String,
    default: 'info'
  },
  duration: {
    type: Number,
    default: 3000
  }
})

const visible = ref(false)

onMounted(() => {
  visible.value = true
  setTimeout(() => {
    visible.value = false
  }, props.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;
}
</style>

创建 Message 插件

在 message.js 文件中创建插件，用于全局注册和使用

import { createApp, h } from 'vue'
import Message from './Message.vue'

const message = {
  install(app) {
    const showMessage = (options) => {
      const { content, type, duration } = options

      const messageApp = createApp({
        render() {
          return h(Message, {
            content,
            type,
            duration
          })
        }
      })

      const fragment = document.createDocumentFragment()
      messageApp.mount(fragment)
      document.body.appendChild(fragment)
    }

    app.config.globalProperties.$message = showMessage
  }
}

export default message

在 main.js 中注册插件

import { createApp } from 'vue'
import App from './App.vue'
import message from './message'

const app = createApp(App)
app.use(message)
app.mount('#app')

使用 Message 组件

在组件中可以通过以下方式调用

// 在 setup 中获取
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()
proxy.$message({
  content: '这是一条消息',
  type: 'success',
  duration: 2000
})

// 在选项式 API 中
this.$message({
  content: '这是一条消息',
  type: 'error'
})

添加动画效果

在 Message.vue 中添加过渡动画

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

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translate(-50%, -20px);
}
</style>

支持多个消息同时显示

修改 message.js 以支持多个消息

const message = {
  install(app) {
    const showMessage = (options) => {
      const { content, type = 'info', duration = 3000 } = options
      const mountNode = document.createElement('div')
      document.body.appendChild(mountNode)

      const messageApp = createApp({
        render() {
          return h(Message, {
            content,
            type,
            duration,
            onClose: () => {
              messageApp.unmount()
              document.body.removeChild(mountNode)
            }
          })
        }
      })

      messageApp.mount(mountNode)
    }

    app.config.globalProperties.$message = showMessage
  }
}

添加关闭方法

在 Message.vue 中添加关闭按钮和方法

实现vue message

<template>
  <transition name="fade">
    <div v-if="visible" class="message" :class="type">
      {{ content }}
      <span class="close-btn" @click="close">×</span>
    </div>
  </transition>
</template>

<script setup>
const emit = defineEmits(['close'])

const close = () => {
  visible.value = false
  emit('close')
}
</script>

<style scoped>
.close-btn {
  margin-left: 15px;
  cursor: pointer;
}
</style>