docs: update cell (#4293)

docs/site/mobile/App.vue

@@ -4,6 +4,7 @@
       v-show="title"
       class="van-doc-nav-bar"
       :title="title"
+      :border="false"
       :left-arrow="showNav"
       @click-left="onBack"
     />

src/cell/README.md

@@ -75,7 +75,7 @@ Vue.use(Cell).use(CellGroup);
 </van-cell-group>
 ```
 
-### Advanced Usage
+### Use Slots
 
 ```html
 <van-cell value="Content" is-link>
@@ -143,7 +143,7 @@ Vue.use(Cell).use(CellGroup);
 
 | Name | Description |
 |------|------|
-| default | Default slot |
+| default | Custom value |
 | icon | Custom icon |
 | title | Custom title |
 | label | Custom label |

src/cell/README.zh-CN.md

@@ -41,7 +41,7 @@ Vue.use(Cell).use(CellGroup);
 
 ### 只设置 value
 
-只设置`value`时会向左对齐
+只设置`value`时，内容会靠左对齐
 
 ```html
 <van-cell value="内容" />
@@ -49,7 +49,7 @@ Vue.use(Cell).use(CellGroup);
 
 ### 展示箭头
 
-传入`is-link`属性则会在右侧显示箭头，并且可以通过传入`arrow-direction`属性控制箭头方向
+设置`is-link`属性后会在单元格右侧显示箭头，并且可以通过`arrow-direction`属性控制箭头方向
 
 ```html
 <van-cell title="单元格" is-link />
@@ -79,12 +79,13 @@ Vue.use(Cell).use(CellGroup);
 </van-cell-group>
 ```
 
-### 高级用法
+### 使用插槽
 
-如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容
+如以上用法不能满足你的需求，可以使用插槽来自定义内容
 
 ```html
 <van-cell value="内容" is-link>
+  <!-- 使用 title 插槽来自定义标题 -->
   <template slot="title">
     <span class="custom-title">单元格</span>
     <van-tag type="danger">标签</van-tag>
@@ -92,6 +93,7 @@ Vue.use(Cell).use(CellGroup);
 </van-cell>
 
 <van-cell title="单元格" icon="shop-o">
+  <!-- 使用 right-icon 插槽来自定义右侧图标 -->
   <van-icon
     slot="right-icon"
     name="search"
@@ -138,19 +140,19 @@ Vue.use(Cell).use(CellGroup);
 |------|------|------|
 | click | 点击单元格时触发 | event: Event |
 
-### Cell Slots
-
-| 名称 | 说明 |
-|------|------|
-| default | 自定义`value`显示内容 |
-| title | 自定义标题显示内容 |
-| label | 自定义标题下方描述显示内容 |
-| icon | 自定义左侧图标 |
-| right-icon | 自定义右侧按钮，默认为`arrow` |
-
 ### CellGroup Slots
 
 | 名称 | 说明 |
 |------|------|
 | default | 默认插槽 |
 | title | 自定义分组标题 |
+
+### Cell Slots
+
+| 名称 | 说明 |
+|------|------|
+| default | 自定义右侧内容 |
+| title | 自定义左侧标题 |
+| label | 自定义标题下方描述 |
+| icon | 自定义左侧图标 |
+| right-icon | 自定义右侧按钮，默认为`arrow` |

src/cell/demo/index.vue

@@ -2,38 +2,18 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-cell-group>
-        <van-cell
+        <van-cell :title="$t('cell')" :value="$t('content')" />
-          :title="$t('cell')"
+        <van-cell :title="$t('cell')" :value="$t('content')" :label="$t('desc')" />
-          :value="$t('content')"
-        />
-        <van-cell
-          :title="$t('cell')"
-          :value="$t('content')"
-          :label="$t('desc')"
-        />
       </van-cell-group>
     </demo-block>
 
     <demo-block :title="$t('largeSize')">
-      <van-cell
+      <van-cell :title="$t('cell')" :value="$t('content')" size="large" />
-        :title="$t('cell')"
+      <van-cell :title="$t('cell')" :value="$t('content')" size="large" :label="$t('desc')" />
-        :value="$t('content')"
-        size="large"
-      />
-      <van-cell
-        :title="$t('cell')"
-        :value="$t('content')"
-        size="large"
-        :label="$t('desc')"
-      />
     </demo-block>
 
     <demo-block :title="$t('showIcon')">
-      <van-cell
+      <van-cell :title="$t('cell')" :value="$t('content')" icon="location-o" />
-        :title="$t('cell')"
-        :value="$t('content')"
-        icon="location-o"
-      />
     </demo-block>
 
     <demo-block :title="$t('valueOnly')">
@@ -41,70 +21,36 @@
     </demo-block>
 
     <demo-block :title="$t('showArrow')">
-      <van-cell
+      <van-cell :title="$t('cell')" is-link />
-        :title="$t('cell')"
+      <van-cell :title="$t('cell')" is-link :value="$t('content')" />
-        is-link
+      <van-cell :title="$t('cell')" is-link arrow-direction="down" :value="$t('content')" />
-      />
-      <van-cell
-        :title="$t('cell')"
-        is-link
-        :value="$t('content')"
-      />
-      <van-cell
-        :title="$t('cell')"
-        is-link
-        arrow-direction="down"
-        :value="$t('content')"
-      />
     </demo-block>
 
     <demo-block :title="$t('router')">
-      <van-cell
+      <van-cell :title="$t('urlRoute')" is-link url="/vant/mobile.html" />
-        :title="$t('urlRoute')"
+      <van-cell :title="$t('vueRoute')" is-link to="index" />
-        is-link
-        url="/vant/mobile.html"
-      />
-      <van-cell
-        :title="$t('vueRoute')"
-        is-link
-        to="index"
-      />
     </demo-block>
 
     <demo-block :title="$t('groupTitle')">
       <van-cell-group :title="`${$t('group')} 1`">
-        <van-cell
+        <van-cell :title="$t('cell')" :value="$t('content')" />
-          :title="$t('cell')"
-          :value="$t('content')"
-        />
       </van-cell-group>
       <van-cell-group :title="`${$t('group')} 2`">
-        <van-cell
+        <van-cell :title="$t('cell')" :value="$t('content')" />
-          :title="$t('cell')"
-          :value="$t('content')"
-        />
       </van-cell-group>
     </demo-block>
 
-    <demo-block :title="$t('advancedUsage')">
+    <demo-block :title="$t('useSlots')">
-      <van-cell
+      <van-cell :value="$t('content')" is-link>
-        :value="$t('content')"
-        is-link
-      >
         <template #title>
           <span class="custom-title">{{ $t('cell') }}</span>
           <van-tag type="danger">{{ $t('tag') }}</van-tag>
         </template>
       </van-cell>
-      <van-cell
+
-        icon="shop-o"
+      <van-cell icon="shop-o" :title="$t('cell')">
-        :title="$t('cell')"
-      >
         <template #right-icon>
-          <van-icon
+          <van-icon name="search" style="line-height: inherit;" />
-            name="search"
-            style="line-height: inherit;"
-          />
         </template>
       </van-cell>
     </demo-block>
@@ -124,7 +70,8 @@ export default {
       groupTitle: '分组标题',
       router: '页面导航',
       urlRoute: 'URL 跳转',
-      vueRoute: '路由跳转'
+      vueRoute: '路由跳转',
+      useSlots: '使用插槽'
     },
     'en-US': {
       cell: 'Cell title',
@@ -136,7 +83,8 @@ export default {
       groupTitle: 'Group Title',
       router: 'Router',
       urlRoute: 'URL',
-      vueRoute: 'Vue Router'
+      vueRoute: 'Vue Router',
+      useSlots: 'Use Slots'
     }
   }
 };