Vue觸發(fā)式全局組件構建的方法

發(fā)布時間：2020-08-27 15:07:09 來源：腳本之家閱讀：133 作者：茶樹菇小學生欄目：web開發(fā)

前言

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

背景

前幾月公司開發(fā)一個小程序后臺管理系統(tǒng),客戶可以通過在pc后臺管理系統(tǒng)中定制自己的微信小程序,包括結構更改、數據上傳等,通過將頁面結構抽象成數據的方法,自由控制小程序的展示方式(橫向抽出每個模塊)

Vue觸發(fā)式全局組件構建的方法

而這其中頻繁使用到圖片上傳,每個模塊都得使用,無論是cv大法還是import都顯得不太方便,這就顯現(xiàn)出觸發(fā)式全局注冊組件的優(yōu)勢

Vue觸發(fā)式全局組件構建的方法

不廢話直接開始吧

正文

1、文件結構

Vue觸發(fā)式全局組件構建的方法

其中

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

2、文件解析

template.vue文件沒有太多可說的,只是你要展示的DOM結構,除了本身邏輯,只要預留出顯示隱藏的方法、數據回傳等一些業(yè)務需要的功能

/**
   * 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;

需要使用時通過

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

Vue觸發(fā)式全局組件構建的方法

猜你喜歡

最新資訊

相關推薦

相關標簽