[new feature] Cell: add new prop useLabelSlot & add new slot label

example/pages/cell/index.wxml

@@ -20,16 +20,19 @@
     <van-cell
       title="单元格"
       value="内容"
-      label="描述信息"
       size="large"
+      use-label-slot
       border="{{ false }}"
-    />
+    >
+      <view slot="label">描述信息</view>
+    </van-cell>
   </van-cell-group>
 </demo-block>
 
 <demo-block title="展示图标">
   <van-cell
     title="单元格"
+    value="内容"
     icon="location-o"
     border="{{ false }}"
   />
@@ -48,10 +51,14 @@
     arrow-direction="down"
     value="内容"
     border="{{ false }}"
-    url="/pages/dashboard/index"
   />
 </demo-block>
 
+<demo-block title="页面跳转">
+  <van-cell title="单元格" is-link url="/pages/dashboard/index" />
+  <van-cell title="单元格" is-link url="/pages/dashboard/index" link-type="redirectTo" />
+</demo-block>
+
 <demo-block title="分组标题">
   <van-cell-group title="分组 1">
     <van-cell title="单元格" value="内容" />

packages/cell/README.md

@@ -28,16 +28,8 @@ es5
 
 ```html
 <van-cell-group>
-  <van-cell
+  <van-cell title="单元格" value="内容" />
-    title="单元格"
+  <van-cell title="单元格" value="内容" label="描述信息" border="{{ false }}" />
-    value="内容"
-  />
-  <van-cell
-    title="单元格"
-    value="内容"
-    label="描述信息"
-    border="{{ false }}"
-  />
 </van-cell-group>
 ```
 
@@ -46,17 +38,8 @@ es5
 通过`size`属性可以控制单元格的大小
 
 ```html
-<van-cell
+<van-cell title="单元格" value="内容" size="large" />
-  title="单元格"
+<van-cell title="单元格" value="内容" size="large" label="描述信息" />
-  value="内容"
-  size="large"
-/>
-<van-cell
-  title="单元格"
-  value="内容"
-  size="large"
-  label="描述信息"
-/>
 ```
 
 #### 展示图标
@@ -64,10 +47,7 @@ es5
 通过`icon`属性在标题左侧展示图标
 
 ```html
-<van-cell
+<van-cell title="单元格" icon="location-o" />
-  title="单元格"
-  icon="location-o"
-/>
 ```
 
 #### 展示箭头
@@ -75,22 +55,17 @@ es5
 传入`is-link`属性则会在右侧显示箭头，并且可以通过传入`arrow-direction`属性控制箭头方向
 
 ```html
-<van-cell
+<van-cell title="单元格" is-link />
-  title="单元格"
+<van-cell title="单元格" is-link value="内容" />
-  is-link
+<van-cell title="单元格" is-link value="内容" arrow-direction="down" />
-/>
+```
-<van-cell
+
-  title="单元格"
+#### 页面跳转
-  value="内容"
+
-  is-link
+可以通过`url`属性进行页面跳转，通过`link-type`属性控制跳转类型
-/>
+
-<van-cell
+```html
-  title="单元格"
+<van-cell title="单元格" is-link url="/pages/dashboard/index" link-type="navigateTo" />
-  value="内容"
-  is-link
-  arrow-direction="down"
-  url="/pages/dashboard/index"
-/>
 ```
 
 #### 分组标题
@@ -111,27 +86,15 @@ es5
 如以上用法不能满足你的需求，可以使用对应的插槽来自定义显示的内容
 
 ```html
-<van-cell
+<van-cell value="内容" icon="shop-o" is-link>
-  value="内容"
-  icon="shop-o"
-  is-link
->
   <view slot="title">
     <view class="van-cell-text">单元格</view>
     <van-tag type="danger">标签</van-tag>
   </view>
 </van-cell>
-<van-cell
+<van-cell title="单元格" icon="location-o" is-link />
-  title="单元格"
-  icon="location-o"
-  is-link
-/>
 <van-cell title="单元格">
-  <van-icon
+  <van-icon slot="right-icon" name="search" class="custom-icon" />
-    slot="right-icon"
-    name="search"
-    class="van-cell__right-icon"
-  />
 </van-cell>
 ```
 
@@ -166,6 +129,7 @@ es5
 | is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` |
 | required | 是否显示表单必填星号 | `Boolean` | `false` |
 | arrow-direction | 箭头方向，可选值为 `left` `up` `down` | `String` | - |
+| use-label-slot | 是否使用 label slot | `Boolean` | `false` |
 
 ### Cell Event
 
@@ -179,6 +143,7 @@ es5
 |-----------|-----------|
 | - | 自定义`value`显示内容，如果设置了`value`属性则不生效 |
 | title | 自定义`title`显示内容，如果设置了`title`属性则不生效 |
+| label | 自定义`label`显示内容，需要设置 `use-label-slot`属性 |
 | icon | 自定义`icon`显示内容，如果设置了`icon`属性则不生效 |
 | right-icon | 自定义右侧按钮，默认是`arrow`，如果设置了`is-link`属性则不生效 |
 
@@ -190,11 +155,3 @@ es5
 | title-class | 标题样式类 |
 | label-class | 描述信息样式类 |
 | value-class | 右侧内容样式类 |
-
-### 更新日志
-
-| 版本 | 类型 | 内容 |
-|-----------|-----------|-----------|
-| 0.0.1 | feature | 新增组件 |
-| 0.3.3 | bugfix | 修复 value 为空时 title 最大宽度错误的问题 |
-| 0.3.4 | bugfix | 修复使用 title 插槽时长度错误的问题 |

packages/cell/index.ts

@@ -25,6 +25,7 @@ VantComponent({
     titleWidth: String,
     customStyle: String,
     arrowDirection: String,
+    useLabelSlot: Boolean,
     border: {
       type: Boolean,
       value: true

packages/cell/index.wxml

@@ -19,11 +19,13 @@
     style="{{ titleWidth ? 'max-width:' + titleWidth + ';min-width:' + titleWidth : '' }}"
     class="van-cell__title title-class"
   >
-    <block wx:if="{{ title }}">
+    <block wx:if="{{ title }}">{{ title }}</block>
-      {{ title }}
-      <view wx:if="{{ label }}" class="van-cell__label label-class">{{ label }}</view>
-    </block>
     <slot wx:else name="title" />
+
+    <view wx:if="{{ label || useLabelSlot }}" class="van-cell__label label-class">
+      <slot wx:if="{{ useLabelSlot }}" name="label" />
+      <block wx:elif="{{ label }}">{{ label }}</block>
+    </view>
   </view>
 
   <view class="van-cell__value value-class">