欧美2区3区4区,韩国成人漫画,国产麻豆精品一区二区

展開

后臺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.www.o0547.com/server/index.php?s=/api/attachment/visitFile&sign=0f43ba9003f250fcae8af9589d163dae)