后台DIY组件二次开发

展开

后台DIY组件二次开发

## 组件目录结构
所有diy组件位于`web/components/decorate`中
**├─📂decorate**  //decorate
**│      ├─pc-widgets ** //所有的pc控件
**│      ├─widgets**  // 所有的移动端控件 
**│      ├─.vue** // 其他相关组件
**｜**

### 每个控件组成 
每个控件组成如下：
**├─📂banner ** //banner控件
**│      ├─attribute.vue **//用于渲染右侧的属性设置
**│      ├─contents.vue **//控件在画布中的实际展示效果
**│      ├─index.ts **//导出所有的vue组件
**│      ├─widget.vue **//包裹contents.vue组件，为控件添加操作按钮
**｜**

## 控件数据
所有的可拖拽控件数据位于`web/utils/decorate.ts`，这些数据会渲染在左侧的可拖拽控件列表中
### 每个控件的数据组成
```js
{
	title: '轮播图',  //控件的标题
	name: 'banner', //控件的name值，用于vue的动态组件
	icon: icon_banner, //图标
	show: 1,//是否展示
	operate: [], //悬浮按钮配置 默认不填为：['hidden', 'delete', 'copy', 'moveup', 'movedown']
	content: {
		 data: [
			 {
				 url: '',
				 link: {}
			 }
		]
	},//右侧属性设置绑定的内容，里面的内容可以自由定义
	styles: {
		root_bg_color: 'rgba(0,0,0,0)',
		border_radius: 0, // 图片圆角
		indicator_style: 1, //指示器样式
		indicator_align: 'left', //指示器位置
		indicator_color: '#FF2C3C', //指示器颜色
		padding_top: 0,//上间距
		padding_horizontal: 0,//左右间距
		padding_bottom: 0//下间距
	} //右侧属性设置绑定的样式，里面的内容可以自由定义
}
```  
## 如何添加一个控件
1. 在`web/utils/decorate.ts`中添加控件数据  
2. 在 `web/components/decorate/widgets`中新建控件
目录如下：
**├─📂banner ** //banner控件
**│      ├─attribute.vue **//用于渲染右侧的属性设置
**│      ├─contents.vue **//控件在画布中的实际展示效果
**│      ├─index.ts **//导出所有的vue组件
**│      ├─widget.vue **//包裹contents.vue组件，为控件添加操作按钮
**｜**
3.  注册控件
在 `web/components/decorate/widgets/index.ts`中注册  
```js
...
import banner from './banner'
...
export default {
...
	banner // 注意字段名要与控件数据的name字段一样，不燃组件无法正常喧嚷
...
}
```  
4. 在前台中添加实际渲染的控件  
uniapp中位于`uniapp/components/widgets`，pc中位于`pc/components/widgets` 
在实际的页面中注册：如在`uniapp/pages/index/index.vue`和`uniapp/pages/page/page.vue`中添加
![](https://md.likeshop.cn/server/index.php?s=/api/attachment/visitFile&sign=0f43ba9003f250fcae8af9589d163dae)