实战篇：在vue中开发一个命令式调用的弹窗组件，顶部弹窗图片的toast效果

活动需求要做一个顶部弹窗图片的toast效果，想起element中通过命令调用toast组件的方式，去调研一番，实现了一个类似效果。

相关api：

核心需要用到两个api：

• Vue.extend方法，通过模板创建Vue构造器：https://cn.vuejs.org/v2/api/?#Vue-extend
• vm.$mount方法，获取vm实例：https://cn.vuejs.org/v2/api/?#vm-mount

第一步，创建模板

如下，写一个Vue组件，就像我们平常手动引入使用的组件那样。但是不用写props，所有的配置对象写到data里。关闭的时候，要销毁dom对象。我们知道vm.$el可以拿到组件的dom元素，因此可以通过this.$el.parentNode.removeChild(this.$el)来移除dom。在此之前，用vm.$destroy销毁vm实例。

第二步，创建构造器和vm实例，挂载

我们把前面的Vue组件当做模板，用Vue.extend方法得到一个构造器。

写一个Toastr方法用于调用，接收配置参数。new这个构造器拿到实例。当这个实例有el参数时，会挂载到对应元素上，或者可以通过$mount传入el来挂载。这里我们都不做。只是用参数作为data去new它。然后通过$mount拿到vn对象，赋给实例的vm属性。再手动挂载。

返回vm对象，方便手动调用方法。

import Vue from "vue";
import ToasterTpl from "./Toaster.vue";

const ToasterConstructor = Vue.extend(ToasterTpl);
let tId = 1;
const Toaster = (options) => {
  if (JSON.stringify(options) == undefined) return false;
  let id = "toaster-" + tId++;
  options = options || {};
  if (typeof options === "string") {
    options = {
      message: options,
    };
  }
  
  const ToasterInstance = new ToasterConstructor({
    data: options,
  });
  ToasterInstance.id = id;
  ToasterInstance.vm = ToasterInstance.$mount();
  ToasterInstance.vm.visible = true; // 前面模板中data上的visible属性
  ToasterInstance.dom = ToasterInstance.vm.$el;
  document.body.appendChild(ToasterInstance.dom);
  return ToasterInstance.vm;
};

export default Toaster;

第三步，对外暴露这个方法，挂载到Vue原型上

这个函数已经可以直接使用了。然后可以在main.js通过挂到Vue.prototype上，在任意vue组件中调用。但是vue本身提供了一个install方法封装组件，这样跟我们平常用的组件注册方法就一模一样了。

import toaster from './toaster'

export const Toaster from toaster
export default {
  install (Vue){
      Vue.prototype.$toaster = toaster
      Vue.toaster = toaster
  }
}

使用

import Toaster from '@/components/Toaster/index'

Vue.use(Toaster)

this.$toaster({
  message: this.firstAmount,
  duration: 1500,
})

因为是个方法，也可以在util.js中引入Toaster方法，直接调用。