From dcf78507bee98e20ced55227c23ce660ca111661 Mon Sep 17 00:00:00 2001
From: rex <rexkaneki@gmail.com>
Date: Fri, 27 Jul 2018 15:46:17 +0800
Subject: [PATCH] =?UTF-8?q?[new=20feature]=20CellGroup:=20cell-group?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81=E6=98=BE=E7=A4=BA=E4=B8=8A?=
 =?UTF-8?q?=E4=B8=8B=E8=BE=B9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/pages/cell/index.wxml  | 16 ++++-----
 packages/cell-group/index.js   |  8 +++--
 packages/cell-group/index.pcss | 13 +++++++-
 packages/cell-group/index.wxml |  4 +--
 packages/cell/README.md        | 61 +++++++++++++++++++---------------
 5 files changed, 62 insertions(+), 40 deletions(-)

diff --git a/example/pages/cell/index.wxml b/example/pages/cell/index.wxml
index 3b7c3297..a317d72d 100644
--- a/example/pages/cell/index.wxml
+++ b/example/pages/cell/index.wxml
@@ -1,16 +1,16 @@
 <doc-page title="CELL" without-padding>
 
-  <zan-panel class="cell-panel-demo">
+  <zan-cell-group border class="cell-panel-demo">
     <zan-cell title="单行列表" bindtap="handleTap"></zan-cell>
-  </zan-panel>
+  </zan-cell-group>
 
-  <zan-panel class="cell-panel-demo">
+  <zan-cell-group border class="cell-panel-demo">
     <zan-cell title="单行列表" value="详细信息"></zan-cell>
-  </zan-panel>
+  </zan-cell-group>
 
-  <zan-panel class="cell-panel-demo">
+  <zan-cell-group border class="cell-panel-demo">
     <zan-cell title="单行列表" label="附加描述" value="详细信息"></zan-cell>
-  </zan-panel>
+  </zan-cell-group>
 
   <zan-panel class="cell-panel-demo" title="带 icon 的 cell">
     <zan-cell title="单行列表" value="详细信息">
@@ -32,14 +32,14 @@
     <zan-cell title="只显示箭头" is-link></zan-cell>
   </zan-panel>
 
-  <zan-panel class="cell-panel-demo">
+  <zan-cell-group border class="cell-panel-demo">
     <zan-cell
       title="跳转到首页"
       is-link
       url="/pages/dashboard/index"
       bindtap="handleTap"
     ></zan-cell>
-  </zan-panel>
+  </zan-cell-group>
 
   <zan-panel class="cell-panel-demo" title="cell 组">
     <zan-cell-group>
diff --git a/packages/cell-group/index.js b/packages/cell-group/index.js
index 19150663..dd3bc36b 100644
--- a/packages/cell-group/index.js
+++ b/packages/cell-group/index.js
@@ -1,11 +1,15 @@
 const CELL_PATH = '../cell/index';
-const FIELD_PATH = '../field/index'
+const FIELD_PATH = '../field/index';
 
 Component({
   properties: {
     titleWidth: {
       type: Number,
       value: null
+    },
+    border: {
+      type: Boolean,
+      value: false
     }
   },
   relations: {
@@ -36,7 +40,7 @@ Component({
   },
 
   data: {
-   elementUpdateTimeout: 0
+    elementUpdateTimeout: 0
   },
 
   methods: {
diff --git a/packages/cell-group/index.pcss b/packages/cell-group/index.pcss
index 6df43b1f..a273d5a7 100644
--- a/packages/cell-group/index.pcss
+++ b/packages/cell-group/index.pcss
@@ -1,3 +1,14 @@
+@import "../common/_mixins";
+
 .cell-group {
+  position: relative;
   background-color: #fff;
-}
\ No newline at end of file
+  overflow: hidden;
+}
+
+.cell-group--with-border::after {
+  @mixin hairline;
+
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
diff --git a/packages/cell-group/index.wxml b/packages/cell-group/index.wxml
index 9966b641..f84d06f4 100644
--- a/packages/cell-group/index.wxml
+++ b/packages/cell-group/index.wxml
@@ -1,3 +1,3 @@
-<view class="cell-group">
+<view class="cell-group {{ border ? 'cell-group--with-border' : '' }}">
   <slot></slot>
-</view>
\ No newline at end of file
+</view>
diff --git a/packages/cell/README.md b/packages/cell/README.md
index 0c094044..3e19c823 100644
--- a/packages/cell/README.md
+++ b/packages/cell/README.md
@@ -15,33 +15,6 @@
   <zan-cell title="单行列表" label="附加描述" value="详细信息"></zan-cell>
 ```
 
-#### cell 组使用示例
-多个 cell 组件必须作为 `cell-group` 组件的子组件，否则可能出现显示问题。
-
-```json
-  {
-    "usingComponents": {
-      "zan-cell": "path/to/zanui-weapp/dist/cell/index",
-      "zan-cell-group": "path/to/zanui-weapp/dist/cell-group/index"
-    }
-  }
-```
-
-`cell-group`提供`title-width`控制组内整体 cell 的 title 区域宽度
-```wxml
-  <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>
-    <zan-cell title="表单">
-      <input slot="footer" type="digit" placeholder="带小数点的数字键盘"/>
-    </zan-cell>
-    <zan-cell title="开关">
-      <switch slot="footer" checked/>
-    </zan-cell>
-  </zan-cell-group>
-```
-
 ### 属性与事件
 
 | 名称          | 类型        | 是否必须 | 默认  | 描述                                                                                                     |
@@ -69,3 +42,37 @@
 |-----------|-----------|
 | cell-class | 根节点自定义样式类，通过这个可以改变根节点上的样式 |
 | title-class | title区域自定义样式 |
+
+#### cell 组使用示例
+多个 cell 组件必须作为 `cell-group` 组件的子组件，否则可能出现显示问题。
+
+```json
+  {
+    "usingComponents": {
+      "zan-cell": "path/to/zanui-weapp/dist/cell/index",
+      "zan-cell-group": "path/to/zanui-weapp/dist/cell-group/index"
+    }
+  }
+```
+
+`cell-group`提供`title-width`控制组内整体 cell 的 title 区域宽度
+```wxml
+<zan-cell-group border 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>
+    <zan-cell title="表单">
+		<input slot="footer" type="digit" placeholder="带小数点的数字键盘"/>
+	</zan-cell>
+    <zan-cell title="开关">
+    	<switch slot="footer" checked/>
+    </zan-cell>
+</zan-cell-group>
+```
+
+### 属性与事件
+
+| 名称       | 类型    | 是否必须 | 默认  | 描述             |
+| ---------- | ------- | -------- | ----- | ---------------- |
+| titleWidth | Number  | 否       | 无    | title宽度        |
+| border     | Boolean | 否       | false | 是否显示上下边框 |