# Cell 单元格
cell单元格一般用于一组列表的情况,比如个人中心页,设置页等。
# 平台差异说明
App(vue) | App(nvue) | H5 | 小程序 |
---|---|---|---|
√ | √ | √ | √ |
# 基础功能
- 该组件需要搭配
cell-group
使用,并由它实现列表组的上下边框,如不需要上下边框,配置cellGroup
的border
参数为false
即可。 - 通过
title
设置左侧标题,value
设置右侧内容。 - 通过
icon
字段设置图标,,或者图片链接(本地文件建议使用绝对地址)。
注意: 由于cell
组件需要由cellGroup
组件提供参数值,这些父子组件间通过Vue的"provide/inject"特性注入依赖,
所以您必须使用cellGroup
包裹cell
组件才能正常使用。
<template>
<zx-cell-group>
<zx-cell icon="setting-fill" title="个人设置"></zx-cell>
<zx-cell icon="integral-fill" title="会员等级" value="新版本"></zx-cell>
</zx-cell-group>
</template>
# 自定义内容
- 通过插槽
icon
可以自定义图标,内容会替换左边图标位置 - 通过插槽
title
定义左边标题部分 - 通过插槽
right-icon
定义右边内容部分
<zx-cell-group>
<zx-cell title="夕阳无限好" arrow-direction="down">
<zx-icon slot="icon" size="32" name="search"></zx-icon>
<!-- <zx-badge count="99" :absolute="false" slot="right-icon"></zx-badge> -->
<zx-switch slot="right-icon" v-model="checked"></zx-switch>
</zx-cell>
<zx-cell icon="setting-fill" title="只是近黄昏"></zx-cell>
</zx-cell-group>
如上所示,可以给cell
组件通过slot="right-icon"
设定右边自带的badge
或者switch
组件:
- 如果搭配的是
badge
组件,注意设置absolute
参数为false
去掉绝对定位,否则其位于右侧的恰当位置,详见Badge 徽标数。 - 如果搭配的是
switch
组件,注意要通过v-model
绑定一个内容为布尔值的变量,否则无法操作switch
,详见Switch 开关选择器。
# 自定义大小
设置size
可自定义大小
<zx-cell-group>
<zx-cell
size="large"
title="单元格"
value="内容"
isLink
></zx-cell>
<zx-cell
size="large"
title="单元格"
value="内容"
label="描述信息"
></zx-cell>
</zx-cell-group>
# 展示右箭头
设置isLink
为true
,将会显示右侧的箭头,可以通过arrow-direction控制箭头的方向
<zx-cell-group>
<zx-cell icon="share" title="停车坐爱枫林晚" :isLink="true" arrow-direction="down"></zx-cell>
<zx-cell icon="map" title="霜叶红于二月花" :isLink="false"></zx-cell>
</zx-cell-group>
# 跳转页面
设置isLink
为true
,单元格点击可跳转页面,传入url
设置跳转地址
<zx-cell-group>
<zx-cell
title="打开标签页"
isLink
url="/pages/componentsB/tag/tag"
></zx-cell>
<zx-cell
title="打开徽标页"
isLink
url="/pages/componentsB/badge/badge"
></zx-cell>
</zx-cell-group>
# 右侧内容垂直居中
设置center
为true
,可将右侧内容垂直居中
<zx-cell-group>
<zx-cell
title="单元格"
value="内容"
label="描述信息"
center
></zx-cell>
</zx-cell-group>
# 自定义插槽
设置slot
为title
,可自定义左侧区域内容
设置slot
为value
,可自定义右侧区域内容
<zx-cell-group>
<zx-cell value="内容">
<view
slot="title"
class="zx-slot-title"
>
<text class="zx-cell-text">单元格</text>
<zx-tag
text="标签"
plain
size="mini"
type="warning"
>
</zx-tag>
</view>
</zx-cell>
<zx-cell
title="单元格"
isLink
>
<text
slot="value"
class="zx-slot-value"
>99</text>
</zx-cell>
</zx-cell-group>
/* App.vue */
.cell-hover-class {
background-color: rgb(235, 237, 238);
}
/* 或者单是设置透明度 */
.cell-hover-class {
opacity: 0.5;
}
# API
# CellGroup Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
title | 分组标题 | String | - | - |
border | 是否显示外边框 | Boolean | true | false |
customStyle | 用户自定义外部样式,对象形式,如{'font-size': '12px'} 或 {'fontSize': '12px'} | object | - | - |
# Cell Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
title | 左侧标题 | String | Number | - | - |
label | 标题下方的描述信息 | String | Number | - | - |
value | 右侧的内容 | String | Number | - | - |
icon | 左侧图标名称,或者图片链接(本地文件建议使用绝对地址) | String | - | - |
disabled | 是否禁用cell | Boolean | false | true |
border | 是否显示下边框 | Boolean | true | false |
center | 内容是否垂直居中(主要是针对右侧的value部分) | Boolean | false | true |
url | 点击后跳转的URL地址 | String | - | - |
linkType | 链接跳转的方式,内部使用的是封装的route方法,可能会进行拦截操作 | String | navigateTo | - |
clickable | 是否开启点击反馈(表现为点击时加上灰色背景) | Boolean | false | true |
isLink | 是否展示右侧箭头并开启点击反馈 | Boolean | false | true |
required | 是否显示表单状态下的必填星号(此组件可能会内嵌入input组件) | Boolean | false | true |
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 | - | - |
stop | 点击cell是否阻止事件传播 | Boolean | true | false |
name | 标识符,用于在click 事件中进行返回 | String | Number | - | - |
# Cell Slot
名称 | 说明 |
---|---|
title | 自定义左侧标题部分的内容,如需使用,请勿定义title 参数,或赋值null 即可 |
value | 自定义右侧标题部分的内容,如需使用,请勿定义value 参数,或赋值null 即可 |
icon | 自定义左侧的图标 |
right-icon | 自定义右侧图标内容,需设置arrow 为false 才起作用 |
label | 自定义label 内容 |
# Cell Event
事件名 | 说明 | 回调参数 |
---|---|---|
click | 点击cell列表时触发 | name: props 的name 参数标识符 |