整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
最近接了一個(gè)需求，需要實(shí)現(xiàn)不同登錄人員可以自定義首頁(yè)模塊卡片。簡(jiǎn)單來(lái)說(shuō)，就是實(shí)現(xiàn)首頁(yè)看板模塊的增添與拖拉拽，效果如下：
原生js是支持拖拉拽的，只需要將拖拽的元素的 draggable 屬性設(shè)置成 "true"即可，然后就是調(diào)用相應(yīng)的函數(shù)即可。
拖拽操作 - Web API 接口參考 | MDN
但是，原生js功能不夠完善，使用起來(lái)需要改造的地方很多，因此，選用成熟的第三方插件比較好。
我們的主項(xiàng)目采用的是vue3，,經(jīng)過(guò)一系列對(duì)比，最終選擇了 vue-draggable-next這個(gè)插件。
vue-draggable-next
vue-draggable-next的周下載量月3萬(wàn)左右，可以看出是一個(gè)比較靠譜的插件。
它的使用方式npmj上也介紹的很詳細(xì)：
vue-draggable-next
如果英文的使用Api看起來(lái)比較難受，網(wǎng)上還有中文的使用文檔：
vue.draggable.next 中文文檔 - itxst.com
這個(gè)插件也有vue2版本和純js版本，其他框架也是也是可以完美使用的。
根據(jù)我們的需求，我們應(yīng)該實(shí)現(xiàn)的是分組拖拽，假設(shè)我們有三列，那我們要實(shí)現(xiàn)的就是這A、B、C三列數(shù)據(jù)相互拖拽。
我們看看中文官網(wǎng)給的示例：
vue.draggable.next group 例子
看起來(lái)很容易，我們只需要寫(xiě)多個(gè)draggable標(biāo)簽，每個(gè)draggable標(biāo)簽寫(xiě)入相同的組名即可。
回到代碼中，要想實(shí)現(xiàn)一個(gè)三列可拖拉拽的模塊列表，我們首先需要引入組件
<script lang="ts" setup>
import { VueDraggableNext } from 'vue-draggable-next'
// ....
</script>
然后定義一個(gè)數(shù)組儲(chǔ)存數(shù)據(jù)：
<script lang="ts" setup>
import { VueDraggableNext } from 'vue-draggable-next'
const moduleList = ref([
{
"columnIndex": 1,
"moduleDetail": [
{ "moduleCode": "deviation", "moduleName": "控制失調(diào)空間",},
{ "moduleCode": "meeting_pending", "moduleName": "會(huì)議待辦",},
{ "moduleCode": "abnormal_events", "moduleName": "異常事件", },
{ "moduleCode": "audit_matters", "moduleName": "事項(xiàng)審批",}
],
},
{
"columnIndex": 2,
"moduleDetail": [
{ "moduleCode": "air_conditioning_terminal", "moduleName": "空調(diào)末端", }
],
},
{
"columnIndex": 3,
"moduleDetail": [
{ "moduleCode": "run_broadcast", "moduleName": "運(yùn)行播報(bào)",},
{"moduleCode": "my_schedule", "moduleName": "我的日程", },
{ "moduleCode": "cold_station", "moduleName": "冷站",}
],
}
])
</script>
最后，在代碼中我們使用v-for循環(huán)渲染即可
<div v-for="moduleColumn in moduleList " :key="moduleColumn.columnIndex" class="box">
<VueDraggableNext :list="moduleColumn.moduleDetail" group="column" >
<div v-for="(item, index) in moduleColumn.moduleDetail " :key="item.moduleCode" class="drag-item">
<!-- 模塊內(nèi)容 -->
</div>
</VueDraggableNext>
</div>
注意上面的html結(jié)構(gòu)，我們循環(huán)渲染了三列VueDraggableNext標(biāo)簽，每個(gè)VueDraggableNext標(biāo)簽內(nèi)部又通過(guò)v-for="(item, index) in moduleColumn.moduleDetail渲染了這個(gè)拖拽列內(nèi)部的所有模塊。我們通過(guò)group="column" 讓每個(gè)VueDraggableNext組件的組名相同，實(shí)現(xiàn)了三個(gè)拖拽標(biāo)簽之間的模塊互相拖拉拽。
正常情況小，我們肯定是希望在某個(gè)組件的固定位置才能拖動(dòng)組件，因此我們需要使用到拖拽組件的handle屬性。
vue.draggable.next屬性說(shuō)明：
handle | :handle=".mover" 只有當(dāng)鼠標(biāo)在class為mover類(lèi)的元素上才能觸發(fā)拖到事件 |
根據(jù)屬性說(shuō)明，我們的代碼實(shí)現(xiàn)起來(lái)也非常容易了。
<div v-for="moduleColumn in moduleList " :key="moduleColumn.columnIndex" class="box">
<VueDraggableNext :list="moduleColumn.moduleDetail" handle=".move" group="column">
<div v-for="(item, index) in moduleColumn.moduleDetail " :key="item.moduleCode" class="drag-item">
<div class="move">
拖拽區(qū)域
</div>
<!-- 模塊內(nèi)容 -->
</div>
</VueDraggableNext>
</div>
實(shí)際開(kāi)發(fā)中，我么一定會(huì)根據(jù)接口或者操作動(dòng)態(tài)的更改列表，代碼層也就是更改moduleList的值。非常幸運(yùn)的是，如果你按照上面的方式寫(xiě)代碼，當(dāng)你拖拉拽完畢后，上面的moduleList值會(huì)自動(dòng)更改，我們不用做任何處理！！！這么看，數(shù)據(jù)的增刪改根本不是問(wèn)題。
實(shí)際開(kāi)發(fā)中，我們可能會(huì)遇到一個(gè)問(wèn)題，就是如何動(dòng)態(tài)的去渲染組件，如果你熟悉vue，使用動(dòng)態(tài)組件component就可以實(shí)現(xiàn)。
首先，我們需要定義一個(gè)模塊列表
import MeetingPending from '../components/meetingPending.vue'
import AbnormalEvents from '../components/abnormalEvents/index.vue'
import MySchedule from '../components/mySchedule.vue'
import TransactionApproval from '../components/transactionApproval.vue'
import RunningBroadcast from '../components/runningBroadcast.vue'
import CodeSite from '../components/codeSite/index.vue'
import MismatchSpace from '../components/mismatchSpace/index.vue'
import AirDevice from '../components/airDevice/index.vue'
// !全量模塊選擇列表
export const allModuleList = [
{ moduleCode: 'meeting_pending', label: '會(huì)議待辦', component: MeetingPending },
{ moduleCode: 'my_schedule', label: '我的日程', component: MySchedule },
{ moduleCode: 'audit_matters', label: '事項(xiàng)審批', component: TransactionApproval },
{ moduleCode: 'abnormal_events', label: '異常事件', component: AbnormalEvents },
{ moduleCode: 'deviation', label: '控制失調(diào)空間', component: MismatchSpace },
{ moduleCode: 'run_broadcast', label: '運(yùn)行播報(bào)', component: RunningBroadcast },
{ moduleCode: 'cold_station', label: '冷站', component: CodeSite },
{ moduleCode: 'air_conditioning_terminal', label: '空調(diào)末端', component: AirDevice }
]
然后根據(jù)moduleCode做匹配，動(dòng)態(tài)渲染即可
<div v-for="moduleColumn in moduleList " :key="moduleColumn.columnIndex" class="box">
<VueDraggableNext :list="moduleColumn.moduleDetail" handle=".move" group="column">
<div v-for="(item, index) in moduleColumn.moduleDetail " :key="item.moduleCode" class="drag-item">
<div class="move">
拖拽區(qū)域
</div>
<component :is="getComponentsByCode(item.moduleCode)" ></component>
</div>
</VueDraggableNext>
</div>
如果上面的功能不滿(mǎn)足你的需求，我們可以使用這個(gè)組件的其他屬性，完成更多意想不到的效果
如果下面的屬性說(shuō)明未能完全看明，可以看左邊的對(duì)應(yīng)的菜單查看詳細(xì)說(shuō)明和例子。
屬性名稱(chēng) | 說(shuō)明 |
group | 如果一個(gè)頁(yè)面有多個(gè)拖拽區(qū)域，通過(guò)設(shè)置group名稱(chēng)可以實(shí)現(xiàn)多個(gè)區(qū)域之間相互拖拽 或者 { name: "...", pull: [true, false, 'clone', array , function], put: [true, false, array , function] } |
sort | 是否開(kāi)啟排序,如果設(shè)置為false,它所在組無(wú)法排序 |
delay | 鼠標(biāo)按下多少秒之后可以拖拽元素 |
touchStartThreshold | 鼠標(biāo)按下移動(dòng)多少px才能拖動(dòng)元素 |
disabled | :disabled= "true",是否啟用拖拽組件 |
animation | 拖動(dòng)時(shí)的動(dòng)畫(huà)效果，如設(shè)置animation=1000表示1秒過(guò)渡動(dòng)畫(huà)效果 |
handle | :handle=".mover" 只有當(dāng)鼠標(biāo)在class為mover類(lèi)的元素上才能觸發(fā)拖到事件 |
filter | :filter=".unmover" 設(shè)置了unmover樣式的元素不允許拖動(dòng) |
draggable | :draggable=".item" 樣式類(lèi)為item的元素才能被拖動(dòng) |
ghost-class | :ghost-class="ghostClass" 設(shè)置拖動(dòng)元素的占位符類(lèi)名,你的自定義樣式可能需要加!important才能生效，并把forceFallback屬性設(shè)置成true |
chosen-class | :ghost-class="hostClass" 被選中目標(biāo)的樣式，你的自定義樣式可能需要加!important才能生效，并把forceFallback屬性設(shè)置成true |
drag-class | :drag-class="dragClass"拖動(dòng)元素的樣式，你的自定義樣式可能需要加!important才能生效，并把forceFallback屬性設(shè)置成true |
force-fallback | 默認(rèn)false，忽略HTML5的拖拽行為，因?yàn)閔5里有個(gè)屬性也是可以拖動(dòng)，你要自定義ghostClass chosenClass dragClass樣式時(shí)，建議forceFallback設(shè)置為true |
fallback-class | 默認(rèn)false，克隆選中元素的樣式到跟隨鼠標(biāo)的樣式 |
fallback-on-body | 默認(rèn)false，克隆的元素添加到文檔的body中 |
fallback-tolerance | 按下鼠標(biāo)移動(dòng)多少個(gè)像素才能拖動(dòng)元素，:fallback-tolerance="8" |
scroll | 默認(rèn)true,有滾動(dòng)區(qū)域是否允許拖拽 |
scroll-fn | 滾動(dòng)回調(diào)函數(shù) |
scroll-fensitivity | 距離滾動(dòng)區(qū)域多遠(yuǎn)時(shí)，滾動(dòng)滾動(dòng)條 |
scroll-speed | 滾動(dòng)速度 |
傳送門(mén)：vue.draggable.next 中文文檔 - itxst.com
關(guān)聯(lián)文章：如何實(shí)現(xiàn)模塊的錨點(diǎn)定位及閃爍提示：juejin.cn/post/734622…
作者：石小石Orz
鏈接：https://juejin.cn/post/7346121373112811583
段時(shí)間使用了一下ActionTab感覺(jué)這個(gè)產(chǎn)品，小編也想向這個(gè)產(chǎn)品學(xué)習(xí)學(xué)習(xí)，自己開(kāi)發(fā)一個(gè)工具箱。就當(dāng)是學(xué)習(xí)總結(jié)之用了，有興趣的小伙伴可以私信小編獲取代碼，后續(xù)等功能界面稍微成型了再放到github上開(kāi)源（現(xiàn)在有些拿不出手）~~~
我感覺(jué)便利貼應(yīng)該算是ActionTab上比較方便的功能，因此我們也從便利貼功能組件開(kāi)始。
便利貼功能需要做到兩點(diǎn)：可拖拉拽；可縮放；用戶(hù)可輸入。效果如下：
拖拉拽效果
npm i vue3-draggable-resizable// JS代碼
import "vue3-draggable-resizable/dist/Vue3DraggableResizable.css";
import Vue3DraggableResizable from "vue3-draggable-resizable";
// 模板代碼
<Vue3DraggableResizable
:initW="props.config.w"
:initH="props.config.h"
v-model:x="props.config.x"
v-model:y="props.config.y"
v-model:w="props.config.w"
v-model:h="props.config.h"
:draggable="true"
:resizable="true"
@activated="print('activated')"
@deactivated="print('deactivated')"
@drag-start="print('drag-start')"
@drag-end="console.log"
@resize-start="(e) => emits('resizeStart', e)"
@resizing="(e) => emits('resizing', e)"
@resize-end="(e) => emits('resizeEnd', e)"
class="drag-item">
// 內(nèi)容區(qū)
</Vue3DraggableResizable>const resizeTextArea = () => {
const targetParent = textareaRef.value?.closest(".drag-item");
if (targetParent == null) {
return;
}
const parentHeight = targetParent?.clientHeight;
if (!parentHeight) {
return;
}
const textareaHeight = parentHeight - props.config.headerHeight - 10 - 5;
textareaRef.value!.style.height = `${textareaHeight}px`;
};
// 稍微增加個(gè)防抖功能，降低調(diào)用次數(shù)
const debouncedResizeTextArea = _.debounce(resizeTextArea, 10);
// 事件監(jiān)聽(tīng)
@resize-start="debouncedResizeTextArea"
@resizing="debouncedResizeTextArea"
@resize-end="debouncedResizeTextArea"http://yaat.junxian.me/index.html#/數(shù)字化轉(zhuǎn)型的浪潮下，MISBoot低代碼開(kāi)發(fā)平臺(tái)正成為越來(lái)越多企業(yè)的首選，其拖拉拽自定義表單功能更是成為業(yè)務(wù)人員的利器，實(shí)現(xiàn)了零代碼開(kāi)發(fā)的理想。這項(xiàng)革新技術(shù)不僅讓業(yè)務(wù)人員輕松上手，還能直接掛載菜單應(yīng)用，結(jié)合流程引擎、數(shù)據(jù)報(bào)表、電子簽章等功能，適配移動(dòng)端，擁有40種組件并可自行擴(kuò)展，每個(gè)組件都有獨(dú)立屬性設(shè)置，列表字段、查詢(xún)字段、列表配置都可以獨(dú)立配置，同時(shí)還具備添加顯隱規(guī)則、加載表單時(shí)觸發(fā)、提交表單前觸發(fā)、提交表單后觸發(fā)等js、css代碼的功能。這篇文章將深入探討低代碼開(kāi)發(fā)平臺(tái)拖拉拽自定義表單功能的強(qiáng)大之處，以及它對(duì)企業(yè)數(shù)字化轉(zhuǎn)型的重要意義。
隨著數(shù)字化轉(zhuǎn)型的推進(jìn)，企業(yè)對(duì)快速、靈活地開(kāi)發(fā)應(yīng)用程序和解決方案的需求日益增長(zhǎng)。傳統(tǒng)的軟件開(kāi)發(fā)過(guò)程往往耗時(shí)費(fèi)力，需要專(zhuān)業(yè)的編程技能和繁瑣的代碼編寫(xiě)，這給業(yè)務(wù)人員帶來(lái)了很大的挑戰(zhàn)。然而，低代碼開(kāi)發(fā)平臺(tái)的崛起改變了這一局面。低代碼開(kāi)發(fā)平臺(tái)為業(yè)務(wù)人員提供了一種全新的開(kāi)發(fā)范式，使他們可以通過(guò)直觀的圖形界面和拖拉拽操作就能創(chuàng)建應(yīng)用程序，無(wú)需編寫(xiě)一行代碼。其中的拖拉拽自定義表單功能更是低代碼開(kāi)發(fā)平臺(tái)的一大特色，讓業(yè)務(wù)人員可以輕松定制和調(diào)整表單布局，設(shè)定字段的驗(yàn)證規(guī)則，配置列表顯示和查詢(xún)條件，實(shí)現(xiàn)了真正意義上的零代碼開(kāi)發(fā)。
基于MISBoot低代碼開(kāi)發(fā)平臺(tái)的拖拉拽自定義表單功能簡(jiǎn)直是讓業(yè)務(wù)人員擁有了無(wú)限的可能性。這項(xiàng)功能使得業(yè)務(wù)人員能夠根據(jù)實(shí)際需求，輕松創(chuàng)建符合自身業(yè)務(wù)流程的數(shù)據(jù)輸入界面，無(wú)需編寫(xiě)一行代碼。通過(guò)簡(jiǎn)單的拖拉拽和配置，就能完成一個(gè)完整的數(shù)據(jù)輸入表單，包括40種組件可供選擇，并且每個(gè)組件都有獨(dú)立的屬性設(shè)置，滿(mǎn)足了各種不同的業(yè)務(wù)需求。同時(shí)，拖拉拽自定義表單功能適配移動(dòng)端，使得用戶(hù)可以在手機(jī)端便捷地進(jìn)行表單操作，大大提升了工作效率和靈活性。
拖拉拽自定義表單的靈活性和擴(kuò)展性也是其獨(dú)特之處。每個(gè)組件都可以執(zhí)行擴(kuò)展，使得平臺(tái)可以適應(yīng)各種復(fù)雜的業(yè)務(wù)場(chǎng)景。同時(shí)，列表字段、查詢(xún)字段、列表配置都可以獨(dú)立配置，為用戶(hù)提供了更多的個(gè)性化選擇，滿(mǎn)足了不同用戶(hù)的特定需求。此外，拖拉拽自定義表單還具備添加顯隱規(guī)則、表單時(shí)觸發(fā)、提交表單前觸發(fā)、提交表單后觸發(fā)等js、css代碼的功能，讓用戶(hù)可以根據(jù)實(shí)際需求進(jìn)行更加靈活的定制和擴(kuò)展，實(shí)現(xiàn)更多樣化的業(yè)務(wù)邏輯。
MISBoot低代碼開(kāi)發(fā)平臺(tái) - 基于Spring Cloud微服務(wù)架構(gòu)的拖拉拽自定義表單功能正在成為企業(yè)數(shù)字化轉(zhuǎn)型的利器，它將業(yè)務(wù)人員從繁瑣的編程工作中解放出來(lái)，使他們能夠更專(zhuān)注于業(yè)務(wù)需求的實(shí)現(xiàn)和創(chuàng)新。隨著技術(shù)的不斷演進(jìn)和平臺(tái)功能的不斷完善，相信拖拉拽自定義表單將在未來(lái)發(fā)揮越來(lái)越重要的作用，成為企業(yè)應(yīng)用開(kāi)發(fā)的標(biāo)配工具之一。
MISBoot低代碼開(kāi)發(fā)平臺(tái) - 基于Spring Cloud微服務(wù)架構(gòu)的拖拉拽自定義表單功能不僅實(shí)現(xiàn)了零代碼開(kāi)發(fā)的夢(mèng)想，更讓業(yè)務(wù)人員輕松上手，為企業(yè)數(shù)字化轉(zhuǎn)型注入了強(qiáng)大的活力和創(chuàng)造力。其靈活性、擴(kuò)展性以及適配移動(dòng)端的特點(diǎn)，將為企業(yè)帶來(lái)更高效的業(yè)務(wù)流程和更好的用戶(hù)體驗(yàn)，助力企業(yè)持續(xù)創(chuàng)新與發(fā)展。隨著其不斷的演進(jìn)和普及，必將成為企業(yè)信息化建設(shè)的重要推動(dòng)力量，為企業(yè)贏得更多商業(yè)機(jī)會(huì)和競(jìng)爭(zhēng)優(yōu)勢(shì)。
表單分類(lèi)使業(yè)務(wù)更清晰
在線設(shè)計(jì)管理
表單在線系統(tǒng)配置界面
表單數(shù)據(jù)配置界面
桌面端表單設(shè)計(jì)區(qū)，豐富的組件及屬性配置
移動(dòng)端表單設(shè)計(jì)區(qū)，豐富的組件及屬性配置
豐富的桌面端、移動(dòng)端列表字段、查詢(xún)字段、列表配置
多種表單預(yù)覽方式
直接掛載菜單，掛載直接使用
直接綁定數(shù)據(jù)報(bào)表功能
直接綁定數(shù)據(jù)報(bào)表功能在線打印等
表單預(yù)覽功能
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
