在开发项目的时候，通常需要用到消息提示框，当然如果我们项目用到了elementUI组件，可以直接使用elementUI组件中提供的消息提示框组件，但是如果我们想要进一步自定义组件的话，修改难度比较大，因此我们可以自己封装。

一、封装组件

实现思路：

1、首先利用vue文件，把提示框的基本信息封装好，包括结构样式，动态的字体以及背景颜色，动态图标，动态的文字，然后在mounted钩子函数中利用setTimeout定时把当前组件销毁。
2、创建一个js文件，封装并导出一个message函数，函数中利用Vue.extend方法创建一个构造器，把封装好的vue组件传入给渲染函数
3、实例化组件并进行挂载
4、把组件DOM添加到body元素中
5、为了方便全局使用该组件，利用install函数把组件方法挂载到vue原型对象上

1、创建src/components/Message/index.vue

完成组件的布局

<template>
  <transition name="bounce">
    <div v-if="visible" class="msg-box" :style="styleDom[type]">
      <em class="icon-em" :style="{ backgroundColor: styleDom[type].color }">{{
        styleDom[type].icon
      }}</em>
      <span class="msg-text">{{ text }}</span>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: "这是一条消息提示！",
    },
    type: {
      type: String,
      default: "info",
    },
    durition: {
        type: Number,
        default: 1000
    }
  },
  data() {
    return {
      visible: false,
      styleDom: {
        success: {
          color: "#67c23a",
          backgroundColor: "#f0f9eb",
          icon: "√",
        },
        warn: {
          color: "#e6a23c",
          backgroundColor: "#fcf3e7",
          icon: "！",
        },
        info: {
          color: "#909399",
          backgroundColor: "#edf2fc",
          icon: "i",
        },
        error: {
          color: "#f56c6c",
          backgroundColor: "#fef0f0",
          icon: "×",
        },
      },
    };
  },
  mounted(){
    this.visible = true
    let timer = setTimeout(() => {
        this.visible = false
        clearTimeout(timer)
    }, this.durition+1000);
  }
};
</script>

<style scoped>
.msg-box {
  width: 20%;
  display: inline-block;
  padding: 15px 20px;
  border-radius: 5px;
  min-width: 300px;
  white-space: nowrap;
  position: fixed;
  left: 50%;
  margin-left: -10%;
  transform: translateY(50%);
  font-size: 16px;
}
.icon-em {
  width: 15px;
  height: 15px;
  line-height: 16px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  vertical-align: middle;
  margin-right: 5px;
  font-size: 12px;
}
.msg-text {
  vertical-align: middle;
}
.bounce-enter-active {
  animation: bounce-in 0.5s;
  animation-timing-function: linear;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
  animation-timing-function: linear;
}
@keyframes bounce-in {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(50%);
  }
}
</style>

2、创建src/components/Message/index.js

将组件添加到body中

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

export function message(type, text,durition=1500){
    // 创建构造器
    const constructor = Vue.extend({
        render(h){
            return h(Message,{props:{ type, text, durition}})
        }
    })
    // 创建 constructor 组件实例，并挂载。
    const vm = new constructor().$mount()
    // 把组件DOM添加到body中
    document.body.appendChild(vm.$el)
}

3、创建src/components/index.js

将组件挂载到vue原型对象上，方便使用

import {message} from './Message/index.js'
export default {
    install(Vue){
        Vue.prototype.$msg = message
    }
}

二、组件的使用

1、全局引入注册（main.js）

import myPlugin  from './components/index';
Vue.use(myPlugin)

2、使用

<template>
  <div>
    <!-- <Message></Message> -->
    <button @click="btn">点我</button>
  </div>
</template>

<script>
export default {
  methods: {
    btn(){
      this.$msg('success','测试555---成功！',1000)
      this.$msg('warn','测试666--- 警告！',1000)
      this.$msg('info','测试777 --- 信息！',1000)
      this.$msg('error','测试888 --- 错误！',1000)
    }
  }
}
</script>