vue-简易版message组件

项目中常用到弹窗式的信息提示，本文旨在封装一个统一的message组件，提高开发效率

定义message组件

目的：动画显示message组件，3s后自动消失

<template>
  <transition>
    <div v-show="visible">
      {{message}}
    </div>
  </transition>
</template>
<script>
export default {
  data() {
    return {
      message: "", // 提示信息
      type: '', // 根据不同type展示不同的样式
      visible: false,
      duration: 3000
    }
  },
  mounted() {
    // 实现显示n秒后消失
    if(this.duration) {
      this.timer = setTimeout(() => { // 间隔时间后消失--销毁组件，并移除元素
        this.$destroy();
        this.$el.parentNode.removeChild(this.$el);
      }, this.duration)
    }
  }
}
</script>
<style>
  .v-enter {
    opacity: 0;
  }
  .v-enter-active {
    transition: all 1s linear
  }
  .v-enter {
    opacity: 1;
  }
</style>

实现message、message.success、message.error、message.warning

通过Vue.extend创建MessageConstructor，通过new创建message实例后手动挂载在body上

import Vue from 'vue';
import MessageComponent from './message.vue'

let MessageConstructor = Vue.extend(MessageComponent);// 获取组件的构造函数
const Message = (options) => {
  // 组件的手动挂载：创建组件实例，挂载，添加在body上
  let instance = new MessageConstructor({
    data: {
      ...options,
      visible: true
    },
  });
  instance.$mount();
  document.body.appendChild(instance.$el)
  instance.visible = true
}
['success', 'error', 'warning'].forEach(type => {
  Message[type] = function (options) {
    options.type = type;
    return Message(options)
  }
})

export { Message }

应用

 <button @click='show'>点击出现弹层</button>
 --------------------------
import { Message } from './components/message.js'

methods: {
  show() {
    Message.success({
      message: '这是一个弹层'
    })
  }
}