## Cell 单元格 ### 使用指南 ``` javascript import { Cell, CellGroup } from 'vant'; Vue.use(Cell).use(CellGroup); ``` ### 代码演示 #### 基础用法 将`van-cell-group`组件看成一个容器即可 ```html ``` #### 只设置value 只设置`value`时会向左对齐 ```html ``` #### 展示图标 通过`icon`属性在标题左侧展示图标 ```html ``` #### 展示箭头 传入`is-link`属性则会在右侧显示箭头 ```html ``` #### 高级用法 如以上用法不能满足你的需求,可以使用对应的`slot`来自定义显示的内容 ```html ``` ### 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` |