Cell 单元格

使用指南

  1. import { Cell, CellGroup } from 'vant';
  3. Vue.use(Cell).use(CellGroup);

代码演示

基础用法

将van-cell-group组件看成一个容器即可

  1. <van-cell-group>
  2.   <van-cell title="单元格" value="内容" />
  3.   <van-cell title="单元格" value="内容" label="描述信息" />
  4. </van-cell-group>

只设置value

只设置value时会向左对齐

  1. <van-cell-group>
  2.   <van-cell value="内容" />
  3. </van-cell-group>

展示图标

通过icon属性在标题左侧展示图标

  1. <van-cell-group>
  2.   <van-cell title="单元格" icon="location" />
  3. </van-cell-group>

展示箭头

传入is-link属性则会在右侧显示箭头

  1. <van-cell-group>
  2.   <van-cell title="单元格" is-link />
  3.   <van-cell title="单元格" is-link value="内容" />
  4. </van-cell-group>

高级用法

如以上用法不能满足你的需求，可以使用对应的slot来自定义显示的内容

  1. <van-cell-group>
  2.   <van-cell value="内容" icon="shop" is-link>
  3.     <template slot="title">
  4.       <span class="van-cell-text">单元格</span>
  5.       <van-tag type="danger">标签</van-tag>
  6.     </template>
  7.   </van-cell>
  8.   <van-cell title="单元格" icon="location" is-link />
  9.   <van-cell title="单元格">
  10.     <van-icon slot="right-icon" name="search" class="van-cell__right-icon" />
  11.   </van-cell>
  12. </van-cell-group>

CellGroup API

参数 说明 类型 默认值
border 是否显示外边框 Boolean true

Cell API

参数 说明 类型 默认值
icon 左侧图标，可选值见 Icon 组件 String -
title 左侧标题 String Number -
value 右侧内容 String Number -
label 标题下方的描述信息 String -
border 是否显示内边框 Boolean true
center 是否使内容垂直居中 Boolean false
url 跳转链接 String -
to 路由跳转对象，同 vue-router 的 to String Object -
replace 跳转时是否替换当前 history String false
clickable 是否开启点击反馈 Boolean false
is-link 是否展示右侧箭头并开启点击反馈 Boolean false
required 是否显示表单必填星号 Boolean false

Cell Event

事件名 说明 参数
click 点击 cell 时触发 -

Cell Slot

名称 说明
- 自定义显示内容
icon 自定义icon
title 自定义title
right-icon 自定义右侧按钮，默认是arrow

原文:

https://youzan.github.io/vant/#/zh-CN/cell