电商模板哪个网站好,如何更好的推广app,网站开发主框架一般用什么布局,网站建设j介绍ppt模板Vue无代码可视化项目 右侧栏配置——配置面板components/RightPanel.vueviews/LayoutView.vue装import-sort插件package.json.eslintrc.cjspnpm i安装修复import问题进一步的：components/RightPanel.vue初始化其次editor.ts进一步的：views/LayoutView.vue右侧栏配置——配置面… Vue无代码可视化项目 右侧栏配置——配置面板components/RightPanel.vueviews/LayoutView.vue装import-sort插件package.json.eslintrc.cjspnpm i安装修复import问题 进一步的：components/RightPanel.vue初始化其次 editor.ts进一步的：views/LayoutView.vue 右侧栏配置——配置面板
右侧栏配置主要是表单相关的内容，表单处理是开发中用的特别多的场景；今天从架构师的视角来看下这个表单怎么设计，动态表单、复杂表单、表单联动。
src componentsRightPanel.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 = refMode(null)const toggleMode = (newMode:Mode) = {if(newMode === mode.value){mode.value = null}else{mode.value = newMode}
}
/scripttemplatediv class="left-panel-wrapper"div class="left-panel-left"div class="btn" :class="{active:mode==='outline'}" @click="()=toggleMode('outline')"Lightning //divdiv 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
/templatestyle 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
