1、首先放上最终效果图，整个页面由三个区域组成： - 组件列表存放可以配置的组件名称。 - 放置列表为最终展现的视觉效果。 - 组件输入则可以动态配置内容，最终的配置数据为此处的数据。 ![Animation.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/34e4a83dd56b4148af03f12f9b818040~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=961&h=405&s=195844&e=gif&f=131&b=e1e6c4) ### 1、框架搭建 #### 1.1、安装指定版本的vuedraggable 首先安装支持vue3版本的vuedraggable *注意：默认安装的vuedraggable版本为vue2.0版本，并不通用。* ``` npm install vuedraggable@4.1.0 --save ``` > vue3版本vuedraggable示例地址https://sortablejs.github.io/vue.draggable.next/#/simple > vue3版本vuedraggable Git地址 #### 1.2、布局搭建安装完4.0版本的vuedraggable以后，就可以按下面的写法来进行一个简单的布局了。 ``` ``` 需要注意的是vue3版本不再需要v-for来渲染组件，直接使用template来渲染元素，并且需要指定唯一的item-key值。 #### 1.2、使用到的参数介绍 | 属性名称 | 说明 | | ------------- | ----------------------------------- | | group | name相同的可以互相拖拽 | | list | 拖拽的数组 | | item-key | 唯一key值，不能重复 | | sort | 控制列表是否可以排序 | | forceFallback | 默认false，忽略HTML5的拖拽行为，因为设置了拖拽样式，需要开启 | | ghost-class | 目标位置占位符的样式 | | dragClass | 拖拽对象移动样式 | | animation | 拖拽动画时间 | | pull | clone,拖拽的元素不会从列表消失，直接克隆这条数据 | | put | false，禁止元素拖入 | 函数部分目前只需要定义数据结构 ``` ``` css定义一下分栏布局和拖动、占位样式 ``` ``` 至此页面就可以正常拖拽了，仅拖拽页面不需要用到函数操作，只需要根据配置项把页面布局完成即可。 ![drag.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e98435b4cc54aa2a3005b92904f25af~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=630&h=470&s=140001&e=gif&f=81&b=dde5c3) ### 2、数据接入目前只是完成了组件的添加，接下来要把组件接入。思路是单独定义组件数据，当输入完成以后，根据当前拖动的放置列表下标来存储数据。 #### 2.1、为两列拖拽元素添加拖拽结束事件 ![微信截图_20231229143429.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a0dec74797014aea955f82d4cf6a2705~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=662&h=779&s=181636&e=jpg&b=202020) #### 2.2、设置组件数据组件数据和放置列表的数据是联动的，在编辑完组件以后，数据会存储到放置列表内。此时需要在拖动结束时获取当前拖动的放置列表下标，再把数据赋值给组件数据 ```

组件输入

const onEnd = (evt: any) => { setCurrent(evt.newIndex) } ----- const setCurrent = (idx: number) => { // 设置当前编辑的组件数据 editorData.value = { ...componentsList.value[idx] } editorIndex.value = idx } const setEditorData = () => { // 将编辑的组件数据赋值给放置列表数据 componentsList.value[editorIndex.value] = editorData.value } ``` 最终实现效果如下，可以根据拖动的组件展示不同的组件，并且可以输入。 ![input.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8d442aad50bc46aa97d92d278eca0de1~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=959&h=470&s=123211&e=gif&f=77&b=e1e6c4) #### 2.3、处理数据重复上一步完成以后，组件数据已经可以保留下来了，但是无法做到数据互不冲突，无论是新添加组件，还是编辑其中一个组件，数据都是相同的。这是因为在拖拽的时候数据都是复制的，在修改完数据以后，最左侧的组件列表会接收到最新修改的数据，在下一次拖动的时候就会把已经修改的数据再次拿来使用。目前想到的解决方案是获取当前拖动的组件列表下标，和当前放置列表的下标，手动清除数据。 ```js const onEnd = (evt: any) => { if (evt.target.className === 'components-view' && evt.to.className === 'components-wrap') { // 左侧组件列表的下标 sectionIndex.value = evt.oldIndex } setCurrent(evt.newIndex) } const setCurrent = (idx: number) => { // 设置当前编辑的组件数据 editorData.value = { ...componentsList.value[idx] } editorIndex.value = idx } const setEditorData = () => { // 填完值以后两侧数据都发生了改变，需要重新修改数据 // 把上一次拖动的左侧列表数据清空 sectionList.value[sectionIndex.value].data = '' // 将编辑的组件数据赋值给放置列表数据 componentsList.value[editorIndex.value] = editorData.value } ``` 完成上述步骤以后，简单的动态配置组件就已经完成了，处理框架的代码量并不大，后续可以在上面拓展新的组件，最终可以呈现出一个可以动态配置的页面。下面是完整的代码 [jcode](https://code.juejin.cn/pen/7317920827167473690)