Cell 单元格
cell单元格一般用于一组列表的情况,比如个人中心页,设置页等。
平台兼容性
App(vue) | App(nvue) | H5 | 小程序 | VUE2 | VUE3 |
√ | √ | √ | √ | √ | √ |
基础功能
- 该组件需要搭配
cell-group
使用,并由它实现列表组的上下边框,如不需要上下边框,配置cellGroup
的border
参数为false
即可 - 通过
title
设置左侧标题,value
设置右侧内容 - 通过
icon
字段设置图标,或者图片链接(本地文件建议使用绝对地址)
通过slot自定义内容
- 通过插槽
title
自定义左边标题部分 - 通过插槽
label
自定义左侧标题下面描述内容 - 通过插槽
value
自定义右侧值 - 通过插槽
icon
自定义左侧图标 - 通过插槽
right-icon
自定义右侧图标
展示右箭头
设置isLink
为true
,将会显示右侧的箭头,可以通过arrow-direction
控制箭头的方向:left
right
up
down
跳转页面
设置isLink
为true
,单元格点击可跳转页面,传入url
设置跳转地址
右侧内容垂直居中
通过center
属性设置一个布尔值,可将设置右侧value
内容是否垂直居中,默认true
完整示例
API
CellGroup Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
title | 分组标题 | String | - | - |
border | 是否显示分组标题的下边框 | Boolean | true | true | false |
customStyle | 用户自定义外部样式 | object | - | - |
Cell Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
title | 左侧标题 | String | Number | - | - |
label | 标题下方的描述信息 | String | Number | - | - |
value | 右侧的内容 | String | Number | - | - |
icon | 左侧图标名称,或者图片链接(本地文件建议使用绝对地址) | String | - | - |
disabled | 是否禁用cell | Boolean | false | true | false |
border | 是否显示下边框 | Boolean | true | true | false |
center | 内容是否垂直居中(主要是针对右侧的value部分) | Boolean | false | true | false |
url | 点击后跳转的URL地址 | String | - | - |
linkType | 链接跳转的方式,内部使用的是uv-ui封装的route方法,可能会进行拦截操作 | String | navigateTo | - |
clickable | 是否开启点击反馈(表现为点击时加上灰色背景) | Boolean | false | true | false |
isLink | 是否展示右侧箭头并开启点击反馈 | Boolean | false | true | false |
required | 是否显示表单状态下的必填星号(此组件可能会内嵌入input组件) | Boolean | false | true | false |
rightIcon | 右侧的图标箭头 | String | arrow-right | - |
arrowDirection | 右侧箭头的方向,可选值为:left up down | String | right | left | up | down |
iconStyle | 左侧图标样式 | Object | String | - | - |
rightIconStyle | 右侧箭头图标的样式 | Object | String | - | - |
titleStyle | 标题的样式 | Object | String | - | - |
size | 单位元的大小,可选值为large | String | - | large | normal |
stop | 点击cell是否阻止事件传播 | Boolean | true | true | false |
name | 标识符,用于在click 事件中进行返回 | String | Number | - | - |
cellStyle | 自定义单元格样式,如:设置padding等样式。如果想在isLink为true状态下不表现出点击态,可以使用此属性设置背景颜色 | Object | String | - | - |
customStyle | 自定义外部样式,如:设置边框等样式 | Object | String | - | - |
Cell Slots
名称 | 说明 |
title | 自定义左侧标题部分的内容,如需使用,请勿定义title 参数,或赋值null 即可 |
value | 自定义右侧内容,如需使用,请勿定义value 参数,或赋值null 即可 |
icon | 自定义左侧的图标 |
right-icon | 自定义右侧图标内容,需设置arrow 为false 才起作用 |
label | 自定义标题下方的描述内容 |
Cell Events
事件名 | 说明 | 回调参数 |
@click | 点击cell列表时触发 | name: props 的name 参数标识符 |