Vant Cell 单元格
使用Vant Cell 按钮组件,需要先进行引用。
引入
在app.json或index.json中引入组件,详细介绍见快速上手
"usingComponents": { "van-cell": "@vant/weapp/cell/index", "van-cell-group": "@vant/weapp/cell-group/index" }
基础用法
Cell可以单独使用,也可以与CellGroup搭配使用。CellGroup可以为Cell提供上下外边框。
<van-cell-group> <van-cell title="单元格" value="内容" /> <van-cell title="单元格" value="内容" label="描述信息" border="{{ false }}" /> </van-cell-group>
单元格大小
通过size属性可以控制单元格的大小
<van-cell title="单元格" value="内容" size="large" /> <van-cell title="单元格" value="内容" size="large" label="描述信息" />
展示图标
通过icon属性在标题左侧展示图标
<van-cell title="单元格" icon="location-o" />
展示箭头
设置is-link属性后会在单元格右侧显示箭头,并且可以通过arrow-direction属性控制箭头方向
<van-cell title="单元格" is-link /> <van-cell title="单元格" is-link value="内容" /> <van-cell title="单元格" is-link value="内容" arrow-direction="down" />
页面跳转
可以通过url属性进行页面跳转,通过link-type属性控制跳转类型
<van-cell is-link title="单元格" link-type="navigateTo" url="/pages/dashboard/index" />
分组标题
通过CellGroup的title属性可以指定分组标题
<van-cell-group title="分组1"> <van-cell title="单元格" value="内容" /> </van-cell-group> <van-cell-group title="分组2"> <van-cell title="单元格" value="内容" /> </van-cell-group>
使用插槽
如以上用法不能满足你的需求,可以使用插槽来自定义内容
<van-cell 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 title="单元格"> <van-icon slot="right-icon" name="search" class="custom-icon" /> </van-cell>
垂直居中
通过center属性可以让Cell的左右内容都垂直居中
<van-cell center title="单元格" value="内容" label="描述信息" />
API
API使用参数介绍表
CellGroup Props
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
title | 分组标题 | string | - | - |
border | 是否显示外边框 | boolean | true | - |
CellGroup 外部样式类
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
Cell Props
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
icon | 左侧图标名称或图片链接,可选值见 Icon 组件 | string | - | - |
title | 左侧标题 | string | number | - | |
title-width | 标题宽度,须包含单位 | string | - | - |
value | 右侧内容 | string | number | - | - |
label | 标题下方的描述信息 | string | - | - |
size | 单元格大小,可选值为 large | string | - | - |
border | 是否显示下边框 | boolean | true | - |
center | 是否使内容垂直居中 | boolean | false | - |
url | 点击后跳转的链接地址 | string | - | - |
link-type | 链接跳转类型,可选值为 redirectTo switchTab reLaunch | string | navigateTo | - |
clickable | 是否开启点击反馈 | boolean | false | - |
is-link | 是否展示右侧箭头并开启点击反馈 | boolean | false | - |
required | 是否显示表单必填星号 | boolean | false | - |
arrow-direction | 箭头方向,可选值为 left up down | string | - | - |
use-label-slot | 是否使用 label slot | boolean | false | - |
title-style | 标题样式 | string | - | 1.4.0 |
Cell Event
事件名 | 说明 | 参数 |
---|---|---|
bind:click | 点击单元格时触发 | - |
Cell Slot
名称 | 说明 |
---|---|
- | 自定义value显示内容,如果设置了value属性则不生效 |
title | 自定义title显示内容,如果设置了title属性则不生效 |
label | 自定义label显示内容,需要设置 use-label-slot属性 |
icon | 自定义icon显示内容,如果设置了icon属性则不生效 |
right-icon | 自定义右侧按钮,默认是arrow,如果设置了is-link属性则不生效 |
Cell 外部样式类
类名 | 说明 |
---|---|
custom-class | 根节点样式类 |
title-class | 标题样式类 |
label-class | 描述信息样式类 |
value-class | 右侧内容样式类 |