Vue觸發(fā)式全局組件構(gòu)建的方法
前言
在開發(fā)中總會遇到一些全局組件,如果通過import
導(dǎo)入,components
掛載就顯得冗余,而一些UI框架(諸如 elementUi、iview等)通過調(diào)用觸發(fā)的形式就顯得很便捷,本文就是簡單的構(gòu)建一個類似組件
背景
前幾月公司開發(fā)一個小程序后臺管理系統(tǒng),客戶可以通過在pc后臺管理系統(tǒng)中定制自己的微信小程序,包括結(jié)構(gòu)更改、數(shù)據(jù)上傳等,通過將頁面結(jié)構(gòu)抽象成數(shù)據(jù)的方法,自由控制小程序的展示方式(橫向抽出每個模塊)
而這其中頻繁使用到圖片上傳,每個模塊都得使用,無論是cv大法還是import
都顯得不太方便,這就顯現(xiàn)出觸發(fā)式全局注冊組件的優(yōu)勢
不廢話直接開始吧
正文
1、文件結(jié)構(gòu)
其中
template.vue
: 是頁面結(jié)構(gòu)init.js
: 是初始化操作,就處理調(diào)用參數(shù)注入index.js
: 拋出接口,用于Vue.use()
注冊
2、文件解析
template.vue
文件沒有太多可說的,只是你要展示的DOM結(jié)構(gòu),除了本身邏輯,只要預(yù)留出顯示隱藏的方法、數(shù)據(jù)回傳等一些業(yè)務(wù)需要的功能
/** * onShow - 控制組件顯示 * * @return {type} */ onShow() { this.uploadModalShow = true },
init.js
:
import uploadModalComponent from './template.vue' import Vue from 'vue' // 構(gòu)造組件 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 = () => {}) => { // 初始化構(gòu)架dom結(jié)構(gòu) 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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue實現(xiàn)在線學(xué)生錄入系統(tǒng)
這篇文章主要為大家詳細介紹了vue實現(xiàn)在線學(xué)生錄入系統(tǒng),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-05-05vue+elementUI實現(xiàn)動態(tài)面包屑
這篇文章主要為大家詳細介紹了vue+elementUI實現(xiàn)動態(tài)面包屑,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-04-04vuex 解決報錯this.$store.commit is not a function的方法
這篇文章主要介紹了vuex 解決報錯this.$store.commit is not a function的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12vue3中emit('update:modelValue')使用簡單示例
這篇文章主要給大家介紹了關(guān)于vue3中emit('update:modelValue')使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-09-09vue element插件this.$confirm用法及說明(取消也可以發(fā)請求)
這篇文章主要介紹了vue element插件this.$confirm用法及說明(取消也可以發(fā)請求),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10VUE項目啟動沒有問題但代碼中script標簽有藍色波浪線標注
這篇文章主要給大家介紹了關(guān)于VUE項目啟動沒有問題但代碼中script標簽有藍色波浪線標注的相關(guān)資料,文中將遇到的問題以及解決的方法介紹的非常詳細,需要的朋友可以參考下2023-05-05elementui?el-upload一次請求上傳多個文件的實現(xiàn)
使用ElementUI?Upload的時候發(fā)現(xiàn)如果是默認方案,上傳多張圖片并不是真正的一次上傳多張,本文就來介紹一下elementui?el-upload一次請求上傳多個文件的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2023-10-10