1.装修目录
mobilePage---中间部分文件夹
mobileConfig--右侧部分文件夹
mobileConfigRight--右侧配置文件夹
左侧菜单是一个组件库，用户可以从这里选择组件并将其拖拽到中间区域。
中间组件是用户编辑页面布局的核心区域，用户可以在这里添加、删除、移动和配置组件。
右侧配置拼在一起组成右侧部分 修改右侧配置的值可以控制中间部分的效果
2.creatDevise创建页面
页面结构
- 顶部导航栏（
devise_head） - 显示当前页面名称（
nameTop），并提供一个编辑功能，允许用户修改页面名称。 - 包含三个按钮：
- 预览：通过
QRcode生成二维码，用于预览页面。 - 仅保存：保存当前页面的配置。
- 保存关闭：保存配置并关闭页面。
- 主内容区域（
diy-wrapper） - 左侧（
left）：组件库，用户可以从这里选择组件并拖拽到中间区域。 - 每个组件类别（如基础组件、营销组件、工具组件）可以展开或折叠。
- 使用
vuedraggable实现组件的拖拽功能。 - 中间（
wrapper-con）：页面编辑区域，用户可以在这里编辑页面布局。 - 显示页面标题（
page-title）和页面背景设置。 - 使用
vuedraggable实现组件的拖拽排序。 - 每个组件都有操作按钮（如删除、复制、隐藏、上下移动）。
- 右侧（
right-box）：配置区域，显示当前选中组件的详细配置选项。 - 根据选中的组件动态加载不同的配置组件。
数据（data）
- 左侧菜单（
leftMenu）：存储左侧组件库的分类和组件列表。 - 中间组件（
mConfig）：存储中间区域的组件配置。 - 右侧配置（
rConfig）：存储右侧配置区域的配置项。
3.左中右联动
左侧组件
- 组件分类：左侧菜单将组件分为不同的类别（如基础组件、营销组件、工具组件），每个类别可以展开或折叠。
- 拖拽功能：使用
vuedraggable库实现组件的拖拽功能。用户可以将组件从左侧菜单拖拽到中间区域。
左侧组件与中间组件的联动
- 当用户从左侧菜单拖拽一个组件到中间区域时，会触发
vuedraggable的@change事件。 - 在
onLog方法中，会处理拖拽事件： - 如果是新增组件（
evt.added），会将组件数据添加到mConfig数组中（mConfig是中间组件的数据源）。 - 组件被添加到
mConfig后，页面会自动更新，显示新添加的组件。
中间组件
- 组件显示：根据
mConfig数组动态渲染组件。 - 组件操作：每个组件都有操作按钮（如删除、复制、隐藏、上下移动）。
- 拖拽排序：使用
vuedraggable实现组件的拖拽排序。
中间组件与右侧配置的联动
- 当用户点击中间区域的某个组件时，会触发
bindconfig方法： - 该方法会将当前组件的配置信息存储到
rConfig数组中（rConfig是右侧配置的数据源）。 - 右侧配置区域会根据
rConfig动态加载对应的配置组件。 - 如果用户对组件进行了配置修改，修改后的配置会通过
config方法返回到propsObj中，从而更新组件的显示。
联动总结
- 左侧菜单到中间组件：
- 用户从左侧菜单拖拽组件到中间区域。
- 触发
onLog方法，将组件数据添加到mConfig数组中。 - 中间区域动态渲染新添加的组件。
- 中间组件到右侧配置：
- 用户点击中间区域的某个组件。
- 触发
bindconfig方法，将组件的配置信息存储到rConfig数组中。 - 右侧配置区域动态加载对应的配置组件。
- 右侧配置到中间组件：
- 用户在右侧配置区域修改配置。
- 触发
config方法，将修改后的配置数据存储到propsObj中。 - 中间组件根据
propsObj的更新动态调整显示效果。
4.实例
轮播图组件图解
以轮播图组件为例
中间部分
右侧部分
右侧配置--内容配置
右侧配置--样式配置
组件定义
- 组件名称（
name）：banner - 标题名称（
cname）：轮播图 - 图标（
icon）：t-icon-zujian-lunbotu - 外部匹配名称（
defaultName）：swiperBg - 右侧配置名称（
configName）：c_banner - 组件类型（
type）：0（基础组件）
属性（props）
index：组件索引num：组件编号
计算属性（computed）
boxStyle：最外层盒子的样式，包括背景渐变、边距、内边距和圆角。contentStyleLeft：左边图片的圆角样式。contentStyleMiddle：中间图片的圆角样式。contentStyleRight：右边图片的圆角样式。dotStyle：指示器的样式，包括左右边距和对齐方式。
数据（data）
defaultConfig：默认配置，包括轮播图的样式、图片列表、间距、背景颜色等。configObj：当前配置对象，动态绑定到模板中。pageData：页面数据，用于监听数据变化。imgSrcList：图片列表，动态绑定到模板中。docType：指示器样式类型。swiperType：轮播图样式类型。themeStyle：主题风格类型。
生命周期钩子（mounted）
- 在组件挂载后，通过
$nextTick获取当前组件的配置数据，并调用setConfig方法初始化配置。
方法（methods）
setConfig：根据传入的配置数据更新组件的状态，包括configObj、imgSrcList、docType、swiperType和themeStyle。
数据存储结构
defaultConfig：定义了组件的默认配置，包括轮播图的样式、图片列表、间距、背景颜色等。这些数据在组件初始化时被加载，并作为默认值使用。
configObj：当前轮播图组件的配置对象，动态绑定到模板中。它的值由setConfig方法根据传入的数据动态更新。
defaultArray：存储所有页面组件的配置数据，通过Vuex的mapState引入。
mobileTheme：存储当前的主题颜色，通过Vuex的mapGetters引入。
在组件挂载时（mounted生命周期钩子），通过$nextTick获取当前组件的配置数据，并调用setConfig方法初始化配置。
监听defaultArray变化：通过watch监听defaultArray的变化，动态更新组件的配置。
移动端匹配
使用外部匹配名称（defaultName）进行匹配
