Cell 单元格

此组件单元格一般用于一组列表的情况，比如个人中心页，设置页等。

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

• 此组件需要搭配 cell-group 使用，并由它实现列表组的上下边框，如不需要上下边框，可设置 cell-group 的 border 属性为 false 即可。
• 通过 title 属性设置左侧标题，通过 value 属性设置右侧内容。
• 通过 icon 属性设置左侧图标。
• 通过 iconSize 属性设置左侧图标大小。
• 通过 iconColor 属性设置左侧图标颜色。

注意：由于 cell 组件需要由 cell-group 组件提供属性值，这些父子组件间通过Vue的"provide/inject"特性注入依赖，所以您必须使用 cell-group 包裹 cell 组件才能正常使用，不能单独使用。

<fu-cell-group>
    <fu-cell title="个人资料"></fu-cell>
    <fu-cell title="当前版本" value="V1.0.0"></fu-cell>
</fu-cell-group>

自定义内容

• 通过插槽 icon 可以自定义图标，内容会替换左边图标。
• 通过插槽 title 可以自定义左侧标题，内容会替换左侧标题。
• 通过插槽 right 自定义右边内容，内容会替换右侧内容。

<fu-cell-group>
    <fu-cell title="自定义内容">
        <template v-slot:title>
            <fu-icon name="search"></fu-icon>    
        </template>
        <template v-slot:right>
            <fu-switch></fu-switch>    
        </template>
    </fu-cell>
    <fu-cell title="自定义内容">
</fu-cell-group>

自定义大小

设置 size 属性可以自定义单元格大小，可选值为 large、normal、mini。

<fu-cell-group :customClass="'fu-bg-FFFFFF'">
    <fu-cell size="large" title="单元格" value="内容" isLink></fu-cell>
    <fu-cell size="large" title="单元格" value="内容" label="描述信息"></fu-cell>
</fu-cell-group>

设置右箭头

设置 isLink 为 true 将会显示右侧箭头，可以通过 arrowDirection 控制箭头方向，可选值为 left、up、down。

<fu-cell-group>
    <fu-cell title="单元格" value="内容" isLink arrowDirection="down"></fu-cell>
    <fu-cell title="单元格" value="内容" :isLink="false"></fu-cell>
</fu-cell-group>

右侧内容垂直居中

设置 center 属性为 true 将会使右侧内容垂直居中。

<fu-cell-group>
    <fu-cell title="单元格" value="内容" center></fu-cell>
    <fu-cell title="单元格" value="内容"></fu-cell>
</fu-cell-group>

自定义插槽

• 设置 slot 为 title 可自定义标题左侧区域内容。
• 设置 slot 为 icon 可自定义标题左侧图标。
• 设置 slot 为 value 可自定义右侧区域内容。
• 设置 slot 为 right 可自定义右侧区域内容。

<fu-cell-group>
    <fu-cell>
        <template v-slot:title>
            <div class="custom-title">自定义标题</div>
        </template>
        <template v-slot:value>
            <div class="custom-value">自定义右侧内容</div>
        </template>
    </fu-cell>
</fu-cell-group>

API

CellGroup Props

属性名	说明	类型	默认值	可选值
title	分组标题	String	-	-
border	是否显示外边框	Boolean	true	false
customClass	定义需要用到的外部类	String	-	-
customStyle	定义需要用到的外部样式	String｜Object	-	-

Cell Props

属性名	说明	类型	默认值	可选值
title	左侧标题	String	-	-
label	标题下方的描述信息	String｜Number	-	-
value	右侧内容	String｜Number	-	-
icon	左侧图标名称	String	-	-
disabled	是否禁用单元格	Boolean	false	true
border	是否显示下边框	Boolean	true	false
center	内容是否垂直居中(主要是针对右侧的value部分)	Boolean	false	true
clickable	是否开启点击反馈(表现为点击时加上灰色背景)	Boolean	false	true
isLink	是否展示右侧箭头并开启点击反馈	Boolean	false	true
rightIcon	右侧图标名称	String	right	-
rightSize	右侧图标大小	String｜Number	16	-
rightColor	右侧图标颜色	String	-	-
arrowDirection	右侧箭头方向	String	right	left/up/down
titleStyle	标题样式	String｜Object	-	-
iconStyle	左侧图标样式	String｜Object	-	-
size	单元格大小	String	normal	large/normal/mini
stop	是否阻止点击事件冒泡	Boolean	false	true
customStyle	自定义单元格样式	String｜Object	-	-

Cell Events

事件名	说明	回调参数
click	点击cell列表时触发	() => void

Cell Slot

名称	说明
title	自定义左侧标题部分的内容，如需使用，请勿定义title参数，或赋值null即可
value	自定义右侧标题部分的内容，如需使用，请勿定义value参数，或赋值null即可
icon	自定义左侧的图标
right	自定义右侧图标内容
label	自定义 label 内容