写一个toast组件

首先我们要知道我们这个toast组件是怎么调用的，一般来说都是全局的 类似于这样

this.$toast({
  content:'你好',
  duration:2000
}).show();

所以我们需要向vue的prototype 绑定一个$toast方法

import Vue from 'vue'
import toast from './component/toast'
Vue.prototype.$toast = toast;

我们的文件大概是这样的 一个js 一个vue文件

image.png

• index.js

import Vue from 'vue';
import Toast from './index.vue'

export default function toast (props){ // 导出一个方法 方法接受一个参数
  const vm = new Vue({ // 生成一个vue实例
    render (h) { // 虚拟dom
      return h(Toast,{props})
    }
  }).$mount();// 创建一个组件实例 这里不能挂载到body上 必须手动append
  document.body.appendChild(vm.$el); // append 组件dom
  const comp = vm.$children[0]; // 获取实例内第一个组件 也就是toast.vue 因为就这一个
  comp.remove = function () { // 穿建一个销毁方法 避免内存泄漏
    document.body.removeChild(vm.$el);
    vm.$destroy()
  }
  return comp  // 最后我们吧这个组件return出去
}

• index.vue