阅读量:1
Vue无代码可视化项目
右侧栏配置——配置面板
右侧栏配置主要是表单相关的内容，表单处理是开发中用的特别多的场景；今天从架构师的视角来看下这个表单怎么设计，动态表单、复杂表单、表单联动。
- src
- components
- RightPanel.vue
components/RightPanel.vue
先将左侧栏复制一份粘到右侧栏上
<script setup lang="ts"> import { Lightning, Share } from '@icon-park/vue-next' import { ref } from 'vue'; import { SmoothDndContainer} from '@/components/SmoothDnd/SmoothDndContainer' import { SmoothDndDraggable} from '@/components/SmoothDnd/SmoothDndDraggable' type Mode = 'outline'|'blocks'|null const mode = ref<Mode>(null) const toggleMode = (newMode:Mode) => { if(newMode === mode.value){ mode.value = null }else{ mode.value = newMode } } </script> <template> <div class="left-panel-wrapper"> <div class="left-panel-left"> <div class="btn" :class="{active:mode==='outline'}" @click="()=>toggleMode('outline')"> <Lightning /> </div> <div class="btn" :class="{active:mode==='blocks'}" @click="()=>toggleMode('blocks')"> <Share /> </div> </div> <!-- 接入动画 --> <transition name="app-left-panel-drawer"> <div class="left-panel-content" v-show="mode"> { {mode}} <!-- 面板中使用SmoothDnd --> <SmoothDndContainer class="block-group" behaviour="copy" tag="div" group-name="blocks" @drag-start="(e,v)=>console.log(e,v)" @drag-leave="(e,v)=>console.log(e,v)" @drop="(e)=>console.log('drop',e)" :get-child-payload="(index:number)=>index+1" > <SmoothDndDraggable v-for="i in 10" :key="i"> <div class="block-item">{ {i}}</div> </SmoothDndDraggable> </SmoothDndContainer> </div> </transition> </div> </template> <style scoped> .left-panel-wrapper { display: flex; height: 100%; background-color: #f5f5f5; border: 1px solid #e8e8e8; } .left-panel-left{ display: flex; padding:0 10px; flex-direction: column; align-items: center; width: 50px; height: 100%; background-color: #e8e8e8; } .btn{ width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 6px; margin-top:20px; /* &:hover{ background-color: #f5f5f5; } */ } .btn:hover{ background-color: #f5f5f5; } /* 被激活时候的特定样式 */ .btn.active{ background-color: rgb(0,196,83); color: #fff; } .left-panel-content{ flex: 1; width: 280px; height: 100%; background-color: #f5f5f5; overflow: hidden; } /* 下面我们会解释这些 class 是做什么的 */ .app-left-panel-drawer-enter-active, .app-left-panel-drawer-leave-active { transition: width 0.1s cubic-bezier(0.3, 0.1, 0.3, 1); } .app-left-panel-drawer-enter-from, .app-left-panel-drawer-leave-to { width: 0; } .app-left-panel-drawer-content { width: calc(var(--panel-width) - 60px); height: 100%; padding: 16px; } .block-item{ width: 40px; height: 40px; background-color: #fff; border: 1px solid #e8e8e8; margin-bottom: 8px; display: flex; justify-content: center; align-items: center; font-size: 14px; transition:background-color 0.3s