[new feature] CellGroup: cell-group组件支持显示上下边框

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>

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: {

packages/cell-group/index.pcss

@@ -1,3 +1,14 @@
+@import "../common/_mixins";
+
 .cell-group {
+  position: relative;
   background-color: #fff;
-}
+  overflow: hidden;
+}
+
+.cell-group--with-border::after {
+  @mixin hairline;
+
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}

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>
+</view>

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 | 是否显示上下边框 |