Vue觸發式全局組件構建(經過Vue.extend、Vue.use構建全局調用觸發組件`Vue.$upload(opts)`)

前言

在開發中總會遇到一些全局組件,若是經過import導入,components掛載就顯得冗餘,而一些UI框架(諸如 elementUi、iview等)經過調用觸發的形式就顯得很便捷,本文就是簡單的構建一個相似組件

背景

前幾月公司開發一個小程序後臺管理系統,客戶能夠經過在pc後臺管理系統中定製本身的微信小程序,包括結構更改、數據上傳等,經過將頁面結構抽象成數據的方法,自由控制小程序的展現方式(橫向抽出每一個模塊)

而這其中頻繁使用到圖片上傳,每一個模塊都得使用,不管是cv大法仍是import都顯得不太方便,這就顯現出觸發式全局註冊組件的優點

不廢話直接開始吧

正文

1. 文件結構

其中

• template.vue: 是頁面結構
• init.js: 是初始化操做,就處理調用參數注入
• index.js: 拋出接口,用於Vue.use()註冊

1. 文件解析

• template.vue文件沒有太多可說的,只是你要展現的DOM結構,除了自己邏輯,只要預留出顯示隱藏的方法、數據回傳等一些業務須要的功能

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

• init.js:

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

• index.js:

// 圖片上傳彈框工具

import uploadModel from './init.js'

const UploadModel = {
  install(Vue) {
      //註冊全局組件
      Vue.component(uploadModel.name, uploadModel)

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

1. 須要使用時經過

// 更換圖片
import ShowUpLoadModal from './plugin/upLoadModal';
Vue.use(ShowUpLoadModal);

this.$uploadModel (opts)便可,這個例子邏輯簡單,這裏只是記錄這種方法