手动添加vue组件

手写一个消息提示组件挂载到vue实例，也是偷来的哈哈

//先在components 下新建一个Message.vue组件

//appear 特性设置节点的在初始渲染的过渡
<template>
  <transition name="move" appear="">
    <div class="msg" v-if="visible">{{ message }}</div>
  </transition>
</template>
<script>
export default {
  name: "Message",
  props: {
    message: {
      type: String,
      default: "我是一个消息提示"
    },
    duration: {
      type: Number,
      default: 3000
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: ["大中国 yyds"]
    };
  },
  mounted() {
    this.autoClose();
  },
  methods: {
    //自动关闭消息提示组件
    autoClose() {
      if (this.duration !== 0) {
        setTimeout(() => {
          this.close();
        }, this.duration + 800); //800毫秒是过渡动画的时间
      }
    },
    //关闭组件
    close() {
      //sync 修饰符
      this.$emit("update:visible", false);
    }
  }
};
</script>
<style lang="less" scoped>
.msg {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  width: 20%;
  padding: 5 20px;
  margin: auto;
  height: 40px;
  line-height: 40px;
  border-radius: 18px;
  background-color: #fff;
  font-size: 16px;
  text-align: center;
  color: #000;
  background-color: #2d8cf0;
  //动画进入时
  &.move-enter,
  &.move-leave-to {
    opacity: 0;
    transform: translateY(-50px);
  }
  //动画持续时
  &.move-enter-active,
  &.move-leave-active {
    transition: 0.8s linear;
  }
}
</style>

components 下新建message.js 完成挂载

import Vue from 'vue'
import Message from "./Message.vue";

const createMessage = (propsData) => {
  //1.生成组件的构造器  propsData固定参数不可更改
  const Ctor = Vue.extend(Message)
  //2.创建组件实例，并执行挂载
  const vm = new Ctor({
    propsData
  }).$mount();
  //监听组件关闭事件
  vm.$on('update:visible', flag => {
    vm.visible = flag
  })
  //3.通过原生Dom api的方式把组件的根元素插入到文档（真实DOM）中
  document.body.appendChild(vm.$el);
  return vm;
}

export {
  createMessage
}

在src下新建plugins文件夹再建index.js文件完成注册

import Message from '@/components/Message.vue'
import {
  createMessage
} from '@/components/message'

export default {
  install(Vue) {
    //注册Message组件
    Vue.component(Message.name, Message)

    //添加原型方法
    Vue.prototype.$message = createMessage
  }
}

最后就是在main.js 文件中引用