国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

低代碼開發(fā)之vue.draggable的使用(進(jìn)階:組件化拖拽生成功能頁(yè)面)

這篇具有很好參考價(jià)值的文章主要介紹了低代碼開發(fā)之vue.draggable的使用(進(jìn)階:組件化拖拽生成功能頁(yè)面)。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請(qǐng)大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

效果展示:

網(wǎng)頁(yè) 通過(guò)拖拽組件配置頁(yè)面,前端,低代碼,vue.js
前言:隨著各公司定制化需求的不斷攀升,公司對(duì)低代碼、組態(tài)化的開發(fā)需求日漸迫切。也許是研發(fā)任務(wù)節(jié)點(diǎn)將至,也許是為順應(yīng)時(shí)代潮流,我也是去學(xué)習(xí)并實(shí)踐了一番。如圖所示。

功能簡(jiǎn)介:

左側(cè)組件區(qū)域特意做了選中態(tài),小眼睛預(yù)覽浮框態(tài)等交互,右側(cè)內(nèi)容區(qū)域支持增加、刪除、退出、重置、預(yù)覽 、保存、應(yīng)用等操作,以及組態(tài)化最重要的功能點(diǎn)–隨意拖拽換位,后期考慮增加屬性面板支持對(duì)拖拽進(jìn)來(lái)的組件進(jìn)行寬高、顏色等的二次編輯修飾。

具體實(shí)現(xiàn):
1、實(shí)現(xiàn)流程依據(jù)

通過(guò)json實(shí)現(xiàn),預(yù)先定義好描述組件的json,json包含了當(dāng)前組件數(shù)據(jù)和當(dāng)前組件的樣式屬性數(shù)據(jù)等,并通過(guò)組件生成器將將描述組件的json結(jié)合起來(lái)渲染出實(shí)際組件,當(dāng)修改樣式屬性時(shí),組件樣式同步更新;

示例json:

json:{
  fieldid:"",
  name:"Input",
  label:"單行文本",
  icon:"input01",
  placeholder:"請(qǐng)輸入",
  value:"",
  rules:{},
  style:{},//組件的樣式
  setting:{},//組件的其他屬性,比如:row:2

實(shí)現(xiàn)原理思維導(dǎo)圖:
網(wǎng)頁(yè) 通過(guò)拖拽組件配置頁(yè)面,前端,低代碼,vue.js

2、實(shí)現(xiàn)詳情介紹

此需求基于開源的vue.draggable ^2.24.3,Vue項(xiàng)目首先需要去npm i -S vuedraggable下載vue.draggable相關(guān)依賴,并導(dǎo)入注冊(cè)draggable組件。如果是原生js直接CDN形式引用vuedraggable壓縮文件即可。建議沒(méi)看過(guò)我初階版本博客的小伙伴去看一下上篇文章再來(lái),沿襲上篇代碼還是分組件區(qū)跟內(nèi)容區(qū)兩個(gè)group,group要名稱一致才可以建立拖拽關(guān)系,那么假設(shè)我們內(nèi)容區(qū)域group起名module,那么組件內(nèi)區(qū)域應(yīng)該也命module,結(jié)合展開面板組件使用那么json結(jié)構(gòu)如下:

componentsList:[
	{
		key: "1",
		name: "頂部指標(biāo)欄",
		group: { name: "module", pull: "clone", put: false },
		child: [
			{
				id: 1,
				type: 0,
				col: 24,
				name: "默認(rèn)樣式",
				imgSrc: "TopIndicator",
				componentName: "TopIndicator",
				activeKey: true
			},
			{
				id: 2,
				type: 1,
				col: 24,
				name: "樣式一",
				imgSrc: "TopIndicatorOne",
				componentName: "TopIndicator",
				activeKey: false
			},
			{
				id: 3,
				type: 2,
				col: 24,
				name: "樣式二",
				imgSrc: "TopIndicatorTwo",
				componentName: "TopIndicator",
				activeKey: false
			}
		]
	},
    ......
]

組件區(qū)域代碼

<div class="left-components beautify-scroll">
					<a-collapse v-model="activeKey">
						<a-collapse-panel
							:key="item.key"
							:header="item.name"
							v-for="item in componentsList"
						>
							<draggable
								v-model="item.child"
								draggable=".li"
								v-bind="dragOptions"
								:options="{ sort: false, group: item.group }"
							>
								<div
									v-for="d in item.child"
									:key="d.id + 'item'"
									:class="[
										'li',
										d.componentName,
										d.col == 12 ? 'w5' : null,
										d.activeKey ? 'active' : null
									]"
								>
									<div class="txt">{{ d.name }}</div>
									<img
										class="img"
										:src="
											require(`@/assets/images/configuration/${d.imgSrc}.png`)
										"
										alt=""
									/>
									<div
										class="eyes"
										@mouseover="panelShow($event, d, item)"
										@mouseout="panelHide"
									></div>
								</div>
								<div
									:class="[
										'amplifier-img-box',
										panelComponentName
									]"
									:style="{ top: panelTop, left: panelLeft }"
									v-show="
										panelFlag && panelParentKey == item.key
									"
								>
									<div class="panel-title">
										{{ panelName }}
									</div>
									<img
										class="panel-img"
										:src="panelImgSrc"
										alt=""
									/>
								</div>
							</draggable>
						</a-collapse-panel>
					</a-collapse>
				</div>

內(nèi)容區(qū)json

contentList:[
	{
		id: 1,
		type: 0,
		col: 24,
		name: "默認(rèn)樣式",
		imgSrc: "TopIndicator",
		componentName: "TopIndicator",
		activeKey: false
	},
	{
		id: 4,
		type: 0,
		col: 24,
		name: "默認(rèn)樣式",
		imgSrc: "IncomeIndicators",
		componentName: "IncomeIndicators",
		activeKey: false
	},
  ......
]

內(nèi)容區(qū)代碼,實(shí)現(xiàn)思路是用:is="item.componentName"去對(duì)應(yīng)組件名注冊(cè)寫好的組件,這樣就可以在draggable的渲染布局里面渲染具體組件

		<draggable
					class="content beautify-scroll"
					group="module"
					v-bind="dragOptions"
					:list="contentList"
					@change="toChange"
				>
					<div
						v-for="(item, index) in contentList"
						:key="'r' + index"
						:class="[
							'item',
							item.componentName,
							item.col == 12 ? 'w5' : null
						]"
					>
							<component
								:key="'c' + item.componentName + item.type"
								:is="item.componentName"
								:isEdit="true"
								:type="Number(item.type)"
								@click.native="selectContentItem(item)"
								:class="[
									item.id == contentActiveId ? 'active' : null
								]"
							></component>
							<div
								v-show="item.id == contentActiveId"
								class="delbtn"
								@click="del(item, index)"
							></div>
					</div>
		  </draggable>

小眼睛顯示預(yù)覽圖浮框不建議用hover去做,因?yàn)檫@里樣式涉及overflow: hidden;如下圖用鼠標(biāo)事件去做會(huì)更好。

methods:

// 鼠標(biāo)移入顯示浮態(tài)框
		panelShow(e, d, item) {
			console.log(e, d, item);
			this.panelName = item.name + " - " + d.name;
			this.panelComponentName = d.componentName;
			this.panelImgSrc = require(`@/assets/images/configuration/${d.imgSrc}.png`);
			// 獲取窗口寬度
			let windowHeight =
				window.innerHeight ||
				document.documentElement.clientHeight ||
				document.body.clientHeight;
			// 判斷當(dāng)前鼠標(biāo)位置加上面板位置大于窗口寬度,表示超出不足以顯示,定位向上進(jìn)行定位
			if (e.clientY + 276 > windowHeight) {
				this.panelTop = e.clientY - 296 + "px";
			} else {
				this.panelTop = e.clientY - 40 + "px";
			}

			this.panelLeft = e.clientX + 26 + "px";
			this.panelParentKey = item.key;
			this.panelFlag = true;
		},
		// 鼠標(biāo)移出隱藏浮態(tài)框
		panelHide() {
			this.panelFlag = false;
			this.panelName = "";
			this.panelImgSrc = undefined;
		},

最后再補(bǔ)上一個(gè)組件的刪除函數(shù),因?yàn)閮?nèi)容區(qū)刪除要聯(lián)動(dòng)把組件區(qū)選中態(tài)去除,所以這里的刪除里面要多一些邏輯控制

	del(el, idx) {
			this.contentList.splice(idx, 1);
			// 刪除 取消框選態(tài)
			this.componentsList.map((item) => {
				item.child.map((i) => {
					if (i.id == el.id) {
						i.activeKey = false;
					}
				});
			});
		},

創(chuàng)作不易,點(diǎn)贊支持?。?!文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-842544.html

到了這里,關(guān)于低代碼開發(fā)之vue.draggable的使用(進(jìn)階:組件化拖拽生成功能頁(yè)面)的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來(lái)自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請(qǐng)注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • 【Vue】Vite 組件化開發(fā)

    【Vue】Vite 組件化開發(fā)

    1. 什么是組件化開發(fā) 組件化開發(fā)指的是:根據(jù)封裝的思想,把頁(yè)面上可重用的部分封裝為組件,從而方便項(xiàng)目的開發(fā)和維護(hù)。 例如:https://gitee.com/vdpadmin/variant-form 所展示的效果,就契合了組件化開發(fā)的思想。用戶可以通過(guò)拖拽組件的方式,快速生成一個(gè)頁(yè)面的布局結(jié)構(gòu)。

    2024年02月10日
    瀏覽(22)
  • Android組件化架構(gòu)開發(fā)--為什么要使用組件化?組件分層?組件路由的簡(jiǎn)單實(shí)現(xiàn)。

    Android組件化架構(gòu)開發(fā)--為什么要使用組件化?組件分層?組件路由的簡(jiǎn)單實(shí)現(xiàn)。

    1.1 單工程項(xiàng)目結(jié)構(gòu) 一般我們都是一個(gè)業(yè)務(wù)建一個(gè)包 缺點(diǎn): 各種業(yè)務(wù)代碼混雜在同一個(gè)模塊里,開發(fā)人員在開發(fā)、調(diào)測(cè)過(guò)程的效率越來(lái)越低,定位某個(gè)業(yè)務(wù)問(wèn)題,需要在多個(gè)業(yè)務(wù)代碼混合的模塊中尋找和跳轉(zhuǎn)。 需要了解各個(gè)業(yè)務(wù)的功能,避免代碼的改動(dòng)影響其它業(yè)務(wù)的功能

    2024年02月10日
    瀏覽(26)
  • 前端Vue入門-day03-用Vue實(shí)現(xiàn)工程化、組件化開發(fā)

    前端Vue入門-day03-用Vue實(shí)現(xiàn)工程化、組件化開發(fā)

    (創(chuàng)作不易,感謝有你,你的支持,就是我前行的最大動(dòng)力,如果看完對(duì)你有幫助,請(qǐng)留下您的足跡) 目錄 生命周期 Vue 生命周期 和 生命周期的四個(gè)階段? Vue 生命周期函數(shù)(鉤子函數(shù)) 案例-create的應(yīng)用 案例-mounted的應(yīng)用 工程化開發(fā) 腳手架 Vue CLI 開發(fā) Vue 的兩種方式 基本介

    2024年02月15日
    瀏覽(120)
  • 【vue2第九章】組件化開發(fā)和根組件以及style上的scoped作用

    【vue2第九章】組件化開發(fā)和根組件以及style上的scoped作用

    組件化開發(fā)和根組件 什么是組件化開發(fā)? 一個(gè)頁(yè)面可以拆分為多個(gè)組件,每個(gè)組件有自己的 樣式,結(jié)構(gòu),行為 ,組件化開發(fā)的好處就是,便于維護(hù),利于重復(fù)利用,提升開發(fā)的效率。 便于維護(hù) :頁(yè)面中塊出了問(wèn)題,可以直接去找到這個(gè)組件,修改組件的樣式邏輯結(jié)構(gòu)。

    2024年02月10日
    瀏覽(102)
  • Vue(組件化編程:非單文件組件、單文件組件)

    Vue(組件化編程:非單文件組件、單文件組件)

    傳統(tǒng)組件編寫:不同的HTML引入不同的樣式和行為文件 組件方式編寫:組件單獨(dú), 復(fù)用率高(前提組件拆分十分細(xì)致)? 理解為封裝行為:html,css,js封裝在一個(gè)文件中 解釋模塊化和組件化的區(qū)別: 組件化 :css,js,html三件套使用在同一部分的代碼封裝在一個(gè)組件中 模塊化

    2024年02月01日
    瀏覽(22)
  • VUE3 --->組件化

    目錄 vue-cli 1、基于 vue ui 創(chuàng)建 vue 項(xiàng)目 ?組件庫(kù) 1.vue 組件庫(kù) 2.vue 組件庫(kù)和 bootstrap 的區(qū)別 3. 最常用的 vue 組件庫(kù) 4. Element UI axios 攔截器 1. 回顧:在 vue3 的項(xiàng)目中全局配置 axios 2. 在 vue2 的項(xiàng)目中全局配置 axios 3、攔截器 4. 配置請(qǐng)求攔截器 5、配置響應(yīng)攔截器 proxy 跨域代理 1. 回

    2024年02月15日
    瀏覽(48)
  • 二、Vue組件化編程

    二、Vue組件化編程

    Vue 中使用組件的三大步驟: 定義組件(創(chuàng)建組件) 注冊(cè)組件 使用組件(寫組件標(biāo)簽) 如何定義一個(gè)組件? 使用 Vue.extend(options) 創(chuàng)建,其中 options 和 new Vue(options) 時(shí)傳入的那個(gè) options 幾乎一樣,但也有點(diǎn)區(qū)別; 區(qū)別如下: el 不要寫,為什么? ——— 最終所有的組件都要經(jīng)過(guò)一

    2024年02月22日
    瀏覽(18)
  • 通用vue組件化登錄頁(yè)面

    通用vue組件化登錄頁(yè)面

    1.首先建立一個(gè)login文件夾,在里面建立對(duì)應(yīng)的login.vue文件 2.設(shè)置登錄頁(yè)面的背景圖,在App.vue文件中使用router-view進(jìn)行展示登錄組件 3.先給App.vue的div元素設(shè)置高度100%,之后在login.vue里面去設(shè)置背景圖 這里注意怎么使login組件垂直水平居中的樣式 1.首先建立一個(gè)cpns的文件夾,里

    2024年02月09日
    瀏覽(26)
  • 組件化開發(fā)之如何封裝組件-react

    組件是構(gòu)建用戶界面的基本單元,它是一個(gè)獨(dú)立的、可重用的、可組合的代碼單元,用于表示UI的一部分。 人話:當(dāng)談?wù)摻M件時(shí),就像在搭積木一樣,每個(gè)組件都是一個(gè) 獨(dú)立的、可以重復(fù)使用 的代碼塊,用來(lái)構(gòu)建網(wǎng)頁(yè)或應(yīng)用的各個(gè)部分。比如界面的布局,像按鈕、文本輸入

    2024年02月11日
    瀏覽(21)
  • 小程序組件化開發(fā)

    小程序組件化開發(fā)

    ????隨著小程序的普及,越來(lái)越多的開發(fā)者開始使用小程序進(jìn)行開發(fā),而小程序的組件化開發(fā)已經(jīng)成為了一種標(biāo)配的開發(fā)模式。本文將深入介紹小程序組件化開發(fā)的相關(guān)知識(shí),包括組件的定義、生命周期、通信和使用等方面,幫助大家更好地理解和使用小程序的組件化開發(fā)

    2023年04月20日
    瀏覽(23)

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包