[improvement]cell:优化默认slot展示效果，添加title区域自定义class (#360)

* [improvement]cell:优化默认slot展示效果，添加title区域自定义class

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

example/pages/cell/index.js

@@ -3,7 +3,8 @@ var Zan = require('../../dist/index');
 Page(Object.assign({}, Zan.Switch, {
   data: {
     checked: false,
-    show: true
+    show: true,
+    date: ''
   },
 
   onLoad() {
@@ -18,6 +19,12 @@ Page(Object.assign({}, Zan.Switch, {
     });
   },
 
+  bindDateChange(e) {
+    this.setData({
+      date: e.detail.value
+    });
+  },
+
   handleTap() {
     console.log('cell tapped');
   }

example/pages/cell/index.wxml

@@ -18,6 +18,16 @@
     </zan-cell>
   </zan-panel>
 
+  <zan-panel class="cell-panel-demo">
+    <zan-cell title="单行列表">
+      <picker mode="date" value="{{date}}" start="2018-07-01" end="2018-09-01" bindchange="bindDateChange">
+        <view class="picker">
+          选择日期: {{date}}
+        </view>
+      </picker>
+    </zan-cell>
+  </zan-panel>
+
   <zan-panel class="cell-panel-demo" title="带箭头的 cell">
     <zan-cell title="只显示箭头" is-link></zan-cell>
   </zan-panel>

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>
@@ -66,3 +67,4 @@
 | 类名       | 说明      |
 |-----------|-----------|
 | cell-class | 根节点自定义样式类，通过这个可以改变根节点上的样式 |
+| title-class | title区域自定义样式 |

packages/cell/index.js

@@ -4,7 +4,7 @@ const warn = (msg, getValue) => {
 };
 
 Component({
-  externalClasses: ['cell-class'],
+  externalClasses: ['cell-class', 'title-class'],
   options: {
     multipleSlots: true
   },
@@ -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.pcss

@@ -24,6 +24,15 @@
   display: none
 }
 
+.zan-cell__title {
+  min-width: 65px;
+  padding-right: 10px;
+}
+
+.zan-cell__title:empty {
+  display: none;
+}
+
 .zan-cell__bd {
   flex: 1;
 }

packages/cell/index.wxml

@@ -7,9 +7,12 @@
     <slot name="icon"></slot>
   </view>
 
-  <view class="zan-cell__bd">
+  <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>
+
+  <view class="zan-cell__bd">
     <slot></slot>
   </view>