diff --git a/packages/cell-group/index.js b/packages/cell-group/index.js index ea805902..19150663 100644 --- a/packages/cell-group/index.js +++ b/packages/cell-group/index.js @@ -2,6 +2,12 @@ const CELL_PATH = '../cell/index'; const FIELD_PATH = '../field/index' Component({ + properties: { + titleWidth: { + type: Number, + value: null + } + }, relations: { [CELL_PATH]: { type: 'child', @@ -43,10 +49,13 @@ Component({ const elementUpdateTimeout = setTimeout(() => { this.setData({ elementUpdateTimeout: 0 }); let elements = this.getRelationNodes(childPath); + const { titleWidth } = this.properties; + if (elements.length > 0) { let lastIndex = elements.length - 1; elements.forEach((cell, index) => { + titleWidth && cell.setTitleWidth(titleWidth) cell.updateIsLastElement(index === lastIndex); }); } diff --git a/packages/cell/README.md b/packages/cell/README.md index 51ab8e4a..5113c3a7 100644 --- a/packages/cell/README.md +++ b/packages/cell/README.md @@ -27,8 +27,9 @@ } ``` +`cell-group`提供`title-width`控制组内整体 cell 的 title 区域宽度 ```wxml - + diff --git a/packages/cell/index.js b/packages/cell/index.js index 132515ce..25151ac8 100644 --- a/packages/cell/index.js +++ b/packages/cell/index.js @@ -46,7 +46,8 @@ Component({ } }, data: { - isLastCell: true + isLastCell: true, + titleWidth: 'auto' }, methods: { footerTap() { @@ -72,6 +73,13 @@ Component({ // 用于被 cell-group 更新,标志是否是最后一个 cell updateIsLastElement(isLastCell) { this.setData({ isLastCell }); + }, + + // 设置统一的title区域宽度 + setTitleWidth(titleWidth) { + this.setData({ + titleWidth: `${titleWidth}px` + }); } } }); diff --git a/packages/cell/index.wxml b/packages/cell/index.wxml index 9dd83c03..db6db63d 100644 --- a/packages/cell/index.wxml +++ b/packages/cell/index.wxml @@ -7,7 +7,7 @@ - + {{ title }} {{ label }}