Vue觸發(fā)式全局組件構建的方法
前言
在開發(fā)中總會遇到一些全局組件,如果通過import導入,components掛載就顯得冗余,而一些UI框架(諸如 elementUi、iview等)通過調(diào)用觸發(fā)的形式就顯得很便捷,本文就是簡單的構建一個類似組件
背景
前幾月公司開發(fā)一個小程序后臺管理系統(tǒng),客戶可以通過在pc后臺管理系統(tǒng)中定制自己的微信小程序,包括結(jié)構更改、數(shù)據(jù)上傳等,通過將頁面結(jié)構抽象成數(shù)據(jù)的方法,自由控制小程序的展示方式(橫向抽出每個模塊)

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

不廢話直接開始吧
正文
1、文件結(jié)構

其中
template.vue: 是頁面結(jié)構init.js: 是初始化操作,就處理調(diào)用參數(shù)注入index.js: 拋出接口,用于Vue.use()注冊
2、文件解析
template.vue文件沒有太多可說的,只是你要展示的DOM結(jié)構,除了本身邏輯,只要預留出顯示隱藏的方法、數(shù)據(jù)回傳等一些業(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結(jié)構
initUploadModal()
// 注入回調(diào)函數(shù)
if (success instanceof Function) $vue.success = success;
else console.error('傳入成功回調(diào)函數(shù)');
if (fail instanceof Function) $vue.fail = fail;
else console.error('傳入失敗回調(diào)函數(shù)');
// 組件顯示
$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)即可,這個例子邏輯簡單,這里只是記錄這種方法
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
vue+elementUI實現(xiàn)動態(tài)面包屑
這篇文章主要為大家詳細介紹了vue+elementUI實現(xiàn)動態(tài)面包屑,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-04-04
vuex 解決報錯this.$store.commit is not a function的方法
這篇文章主要介紹了vuex 解決報錯this.$store.commit is not a function的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
vue3中emit('update:modelValue')使用簡單示例
這篇文章主要給大家介紹了關于vue3中emit('update:modelValue')使用的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-09-09
vue element插件this.$confirm用法及說明(取消也可以發(fā)請求)
這篇文章主要介紹了vue element插件this.$confirm用法及說明(取消也可以發(fā)請求),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10
VUE項目啟動沒有問題但代碼中script標簽有藍色波浪線標注
這篇文章主要給大家介紹了關于VUE項目啟動沒有問題但代碼中script標簽有藍色波浪線標注的相關資料,文中將遇到的問題以及解決的方法介紹的非常詳細,需要的朋友可以參考下2023-05-05
elementui?el-upload一次請求上傳多個文件的實現(xiàn)
使用ElementUI?Upload的時候發(fā)現(xiàn)如果是默認方案,上傳多張圖片并不是真正的一次上傳多張,本文就來介紹一下elementui?el-upload一次請求上傳多個文件的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2023-10-10

