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

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

示例截图：

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

截图示例：

main.js引入

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

引入相关文件

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

并赋值对应参数（leftMenuList）

const leftMenuList = ref(deepClone(componentBaseData))

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

截图示例：

{{ element.name }}

asynDsignList：装修的模块数组

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

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

handleOperationChange：设置区域监听change方法

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

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

页面装修下载链接