cell-group添加titleWidth实现整体控制title区域宽度

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);
           });
         }

packages/cell/README.md

@@ -27,8 +27,9 @@
   }
 ```
 
+`cell-group`提供`title-width`控制组内整体 cell 的 title 区域宽度
 ```wxml
-  <zan-cell-group>
+  <zan-cell-group title-width="90">
     <zan-cell title="只显示箭头" is-link></zan-cell>
     <zan-cell title="跳转到首页" is-link url="/pages/dashboard/index"></zan-cell>
     <zan-cell title="单行列表" label="附加描述" value="详细信息"></zan-cell>

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`
+      });
     }
   }
 });

packages/cell/index.wxml

@@ -7,7 +7,7 @@
     <slot name="icon"></slot>
   </view>
 
-  <view class="title-class zan-cell__title">
+  <view class="title-class zan-cell__title" style="width: {{ titleWidth }}">
     <view wx:if="{{ title }}" class="zan-cell__text">{{ title }}</view>
     <view wx:if="{{ label }}" class="zan-cell__desc">{{ label }}</view>
   </view>