Vue觸發(fā)式全局組件構(gòu)建的方法
前言
在開(kāi)發(fā)中總會(huì)遇到一些全局組件,如果通過(guò)import導(dǎo)入,components掛載就顯得冗余,而一些UI框架(諸如 elementUi、iview等)通過(guò)調(diào)用觸發(fā)的形式就顯得很便捷,本文就是簡(jiǎn)單的構(gòu)建一個(gè)類(lèi)似組件
背景
前幾月公司開(kāi)發(fā)一個(gè)小程序后臺(tái)管理系統(tǒng),客戶(hù)可以通過(guò)在pc后臺(tái)管理系統(tǒng)中定制自己的微信小程序,包括結(jié)構(gòu)更改、數(shù)據(jù)上傳等,通過(guò)將頁(yè)面結(jié)構(gòu)抽象成數(shù)據(jù)的方法,自由控制小程序的展示方式(橫向抽出每個(gè)模塊)
而這其中頻繁使用到圖片上傳,每個(gè)模塊都得使用,無(wú)論是cv大法還是import都顯得不太方便,這就顯現(xiàn)出觸發(fā)式全局注冊(cè)組件的優(yōu)勢(shì)
不廢話(huà)直接開(kāi)始吧
正文
1、文件結(jié)構(gòu)
其中
template.vue: 是頁(yè)面結(jié)構(gòu)init.js: 是初始化操作,就處理調(diào)用參數(shù)注入index.js: 拋出接口,用于Vue.use()注冊(cè)
2、文件解析
template.vue文件沒(méi)有太多可說(shuō)的,只是你要展示的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);
// 組件實(shí)例
let $vue;
// 生成dom
let initUploadModal = ()=>{
// 實(shí)例化
$vue = new uploadModalConstructor({
el: document.createElement('div')
});
// 注入頁(yè)面
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) {
//注冊(cè)全局組件
Vue.component(uploadModel.name, uploadModel)
//添加全局API
Vue.prototype.$uploadModel = uploadModel
}
}
export default UploadModel;
需要使用時(shí)通過(guò)
// 更換圖片 import ShowUpLoadModal from './plugin/upLoadModal'; Vue.use(ShowUpLoadModal);
this.$uploadModel (opts)即可,這個(gè)例子邏輯簡(jiǎn)單,這里只是記錄這種方法
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue tab滾動(dòng)到一定高度,固定在頂部,點(diǎn)擊tab切換不同的內(nèi)容操作
這篇文章主要介紹了vue tab滾動(dòng)到一定高度,固定在頂部,點(diǎn)擊tab切換不同的內(nèi)容操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了vue頁(yè)面圖片不顯示問(wèn)題解決方案,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
在Vue.js應(yīng)用開(kāi)發(fā)中,Vue Router 提供了許多特性來(lái)簡(jiǎn)化前端路由管理和用戶(hù)體驗(yàn),其中一個(gè)重要的特性便是路由重定向和別名,它們可以幫助我們更好地管理和組織路由,本文將詳細(xì)介紹如何在Vue Router中使用路由重定向和別名,需要的朋友可以參考下2024-09-09![vue新手入門(mén)出現(xiàn)function () { [native code] }錯(cuò)誤的解決方案](http://img.jbzj.com/images/xgimg/bcimg3.png)
vue新手入門(mén)出現(xiàn)function () { [native code]&nbs
這篇文章主要介紹了vue新手入門(mén)出現(xiàn)function () { [native code] }錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
詳解基于vue-cli配置移動(dòng)端自適應(yīng)
本篇文章主要介紹了詳解基于vue-cli配置移動(dòng)端自適應(yīng)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
本文主要介紹了Vue生態(tài)的新成員Pinia的詳細(xì)介紹，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了vue實(shí)現(xiàn)虛擬化列表封裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vite+vue3項(xiàng)目中使用SVG方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue項(xiàng)目上傳Github預(yù)覽的實(shí)現(xiàn)示例
這篇文章主要介紹了vue項(xiàng)目上傳Github預(yù)覽的實(shí)現(xiàn)示例，在完成Vue項(xiàng)目以后，在上傳到github并實(shí)現(xiàn)預(yù)覽2018-11-11
vue element動(dòng)態(tài)渲染、移除表單并添加驗(yàn)證的實(shí)現(xiàn)
這篇文章主要介紹了vue element動(dòng)態(tài)渲染、移除表單并添加驗(yàn)證的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01