Notice组件实现

组件实例创建函数：create函数

import Vue from 'vue'
export default function create (Component, props) {
    // 先创建实例
    const vm = new Vue({
        render (h) {
       //h就是createElement,它返回VNode
          return h(Component, {props})
        }
    }).$mount()
    // 手动挂载
    document.body.appendChild(vm.$el)
    //销毁方法
    const comp = vm.$children[0]
    comp.remove = function() {
      document.body.removeChild(vm.$el)
      vm.$destroy()
    }
    return comp
}

Notice组件

// 插槽预留
// 标题。内容等属性
// 自动关闭
<template>
  <div class="box" v-if="isShow">
    <h3>{{title}}</h3>
    <p class="box-content">{{message}}</p>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    message: {
      type: String,
      default: ""
    },
    duration: {
      type: Number,
      default: 1000
    }
  },
  data() {
    return {
      isShow: false
    }
  },
  methods: {
    show(){
      this.isShow = true
      setTimeout(this.hide,this.duration);
    },
    hide() {
      this.isShow = false
      this.remove()
    }
  }
}
</script>

使用

<script>
import Notice from '@/components/notice/Notice'
export default {
  methods: {
    submitForm(form) {
      this.$refs[form].validate(valid => {
        const notice = this.$create(Notice,{
          title:'jdfksjf',
          message: valid ? "请求登录！" : "校验失败",
          duration:1000
        })
        notice.show()
      })
    }
  }
}
</script>