实现vue message

Vue 消息提示组件实现

基本组件结构

创建一个独立的Message.vue组件，包含模板、样式和逻辑部分。模板部分定义消息框的HTML结构，样式部分控制消息框的外观和动画效果，逻辑部分处理消息的显示和隐藏。

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

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

<style scoped>
.message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background-color: #f0f9eb;
  color: #67c23a;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 9999;
  animation: fadein 0.3s;
}

@keyframes fadein {
  from { opacity: 0; top: 0; }
  to { opacity: 1; top: 20px; }
}
</style>

全局注册与调用

在Vue项目中创建一个插件文件message.js，用于全局注册消息组件并提供调用方法。通过Vue.extend创建组件构造器，动态挂载到DOM中。

import Vue from 'vue'
import MessageComponent from './Message.vue'

const MessageConstructor = Vue.extend(MessageComponent)

const message = function(options) {
  const instance = new MessageConstructor({
    data: typeof options === 'string' ? { content: options } : options
  })

  instance.$mount()
  document.body.appendChild(instance.$el)
  instance.show()

  return instance
}

const types = ['success', 'warning', 'error', 'info']
types.forEach(type => {
  message[type] = options => {
    return message({
      ...(typeof options === 'string' ? { content: options } : options),
      type
    })
  }
})

export default message

样式扩展

根据消息类型添加不同的样式类，增强视觉反馈。在Message.vue的样式中增加不同类型消息的样式定义。

.message.success {
  background-color: #f0f9eb;
  color: #67c23a;
}

.message.warning {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.message.error {
  background-color: #fef0f0;
  color: #f56c6c;
}

.message.info {
  background-color: #f4f4f5;
  color: #909399;
}

动画优化

添加进场和退场动画效果，提升用户体验。修改Message.vue的样式部分，增加退场动画定义。

.message.leaving {
  animation: fadeout 0.3s;
}

@keyframes fadeout {
  from { opacity: 1; top: 20px; }
  to { opacity: 0; top: 0; }
}

组件方法更新

修改Message.vue的show方法，在隐藏时添加退场动画类并延迟移除DOM元素。

show() {
  this.visible = true
  setTimeout(() => {
    this.$el.classList.add('leaving')
    setTimeout(() => {
      this.$el.remove()
    }, 300)
  }, this.duration)
}

多实例管理

在message.js中添加实例管理逻辑，防止多次调用产生重叠问题。维护一个实例数组，自动计算位置偏移。

let instances = []
let seed = 1

const message = function(options) {
  const id = 'message_' + seed++
  const instance = new MessageConstructor({
    data: {
      ...(typeof options === 'string' ? { content: options } : options),
      id
    }
  })

  let verticalOffset = 20
  instances.forEach(item => {
    verticalOffset += item.$el.offsetHeight + 16
  })
  instance.verticalOffset = verticalOffset

  instance.$mount()
  document.body.appendChild(instance.$el)
  instance.visible = true

  instances.push(instance)
  return instance
}