vue3.x+elementPlus+swiper+vuedraggable实现页面装修

前言

该实现代码依赖框架：vue3.x+elementPlus+swiper+vuedraggable，做好前期工作，可直接在下面的附件处点击下载链接来下载相关文件；文件中包括搜索/图文广告/滚动消息三个模块代码示例，其他组件实现思路相同，可自行定义。

---

需求

在PC管理端可以自定义装修页面，例如顶部搜索，轮播广告，公告等模块；并在H5或Uniapp 移动端渲染展示

示例截图：

---

前端核心代码

1.自定义组件声明

在components下新建文件夹，将所有组件相关代码都放在此文件夹下，每个组件是一个文件夹，每个文件夹下包含index.vue、operatin.vue 文件一个是组件展示在中间区域，一个是设置配置文件，再在主文件夹下新建index.js 引入并注册所需的组件，并在main.js 文件中引入，使用。

截图示例：

main.js引入

2.自定义组件JS

定义组件集合文件-designData.js 其中定义的数据展示在左侧区域

引入相关文件

import {componentBaseData} from '@/views/design/components/designData'

并赋值对应参数（leftMenuList）

const leftMenuList = ref(deepClone(componentBaseData))

//deepClone 自定义方法，深复制该数据，防止数据污染以及多个相同组件数据联动

截图示例：

3.装修展示页面

左侧模块展示主要代码：vuedraggable使用可查看相关文档

                   

                 

中间区域主要代码:自定义手机容器

asynDsignList：装修的模块数组

handleCompChange：当从左侧拖动模块或者改变模块顺序时方法

handleClickComp：点击对应模块时，高亮当前模块，并显示删除图标，以及右侧打开设置区域

                  :group="{name: 'componentsdragg',pull:''}"

                  :disabled="false" class="draggable-component-phone-wrap"

                  @change="handleCompChange"

                >

                 

               

右侧设置区域 ：

handleOperationChange：设置区域监听change方法

保存

将 asynDsignList 字段调用接口保存至库中，最好转义一下该字段：JSON.stringify(asynDsignList.value)

移动端展示

通过接口请求对应页面装修数据，在移动端也要定义跟pc端相对应的组件，文件命名，组件命名都要保持一致，使用component动态加载对应组件并渲染页面即可。

---

附件

页面装修下载链接