Vue触发式全局组件构建的方法

/**
   * onShow - 控制组件显示
   *
   * @return {type}
   */
  onShow() {
   this.uploadModalShow = true
  },

import uploadModalComponent from './template.vue'
import Vue from 'vue'

// 构造组件
let uploadModalConstructor = Vue.extend(uploadModalComponent);
// 组件实例
let $vue;
// 生成dom
let initUploadModal = ()=>{
  // 实例化
  $vue = new uploadModalConstructor({
    el: document.createElement('div')
  });
  // 注入页面
  document.body.appendChild($vue.$el);
}

const UploadModal = (success = () => {}, fail = () => {}) => {
 // 初始化构架dom结构
 initUploadModal()
 // 注入回调函数
 if (success instanceof Function) $vue.success = success;
 else console.error('传入成功回调函数');
 if (fail instanceof Function) $vue.fail = fail;
 else console.error('传入失败回调函数');
 // 组件显示
 $vue.onShow()
}

export default UploadModal

// 图片上传弹框工具

import uploadModel from './init.js'

const UploadModel = {
 install(Vue) {
   //注册全局组件
   Vue.component(uploadModel.name, uploadModel)

   //添加全局API
   Vue.prototype.$uploadModel = uploadModel
 }
}
export default UploadModel;

// 更换图片
import ShowUpLoadModal from './plugin/upLoadModal';
Vue.use(ShowUpLoadModal);