Cell 单元格
介绍
单元格为列表中的单个展示项。
导入
js
import CellGroup from '@/components/basic/CellGroup.vue'
import Cell from '@/components/basic/Cell.vue'基础用法
Cell 可以单独使用，也可以与 CellGroup 搭配使用，CellGroup 可以为 Cell 提供上下外边框。
html
<CellGroup title="基础用法">
<Cell title="单元格标题" value="内容" />
<Cell title="单元格标题" label="单元格说明" value="内容" />
</CellGroup>单独使用
html
<Cell title="单元格标题" value="内容" />
<Cell title="单元格标题" label="单元格说明" value="内容" />显示箭头的单元格
html
<Cell title="显示箭头" value="内容" showArrow />可以点击的单元格
html
<Cell title="可以点击的单元格" showArrow @click="console.log('点击了！')" />卡片风格
通过 CellGroup 的 inset 属性，可以将单元格转换为圆角卡片风格。
html
<CellGroup title="卡片风格" inset>
<Cell title="单元格标题" value="内容" />
<Cell title="单元格标题" label="单元格说明" value="内容" />
</CellGroup>单元格大小
通过 size 属性可以控制单元格的大小。
html
<CellGroup title="单元格大小">
<Cell title="单元格 large" value="内容" size="large" />
<Cell title="单元格 medium" value="内容" size="medium" />
<Cell title="单元格 small" value="内容" size="small" />
</CellGroup>展示图标
通过 icon 属性在标题左侧或者右侧展示图标。
html
<CellGroup title="展示图标">
<Cell title="图标" value="内容" icon="setting" />
<Cell title="右侧图标" icon="help" rightIcon="map" />
</CellGroup>自定义渲染
如以上用法不能满足你的需求，可以使用自定义渲染函数来自定义内容。
html
<CellGroup title="自定义渲染">
<Cell title="右侧是自定义渲染的图片">
<template #right>
<image src="http://test.com/images/defaultAvatar.png" key="right" />
</template>
</Cell>
</CellGroup>API 参考
Cell
Props
| 名称 | 说明 | 类型 | 必填 | 默认值 |
|---|---|---|---|---|
| title | 左侧标题 | string | - | - |
| value | 右侧内容 | string ︱ number | - | - |
| valueSelectable | 设置右侧内容是否可以选择 | boolean | - | false |
| label | 标题下方的描述信息 | string | - | - |
| icon | 左侧图标名称或图片链接（http/https），等同于 Icon 组件的 icon | string | - | - |
| iconProps | 当使用图标时，左图标的附加属性 | IconProps | - | - |
| iconPlaceholder | 当左侧图标未设置时，是否在左侧追加一个占位区域，以和其他单元格对齐 | boolean | - | false |
| iconWidth | 左侧图标区域的宽度 | number ︱ "auto" | - | 20 |
| iconSize | 左侧图标的大小 | number | - | 15 |
| rightIconSize | 右侧图标的大小 | number | - | 15 |
| rightIcon | 右侧图标名称或图片链接（http/https），等同于 Icon 组件的 icon | string | - | - |
| rightIconProps | 当使用图标时，右图标的附加属性 | IconProps | - | - |
| touchable | 是否可以点击 | boolean | - | false |
| showArrow | 是否展示右侧箭头 | boolean | - | false |
| center | 是否使内容垂直居中 | boolean | - | false |
| size | 大小 | "small" ︱ "medium" ︱ "large" | - | medium |
| backgroundColor | 背景颜色 | string | - | - |
| children | 自定义渲染子级 | Element | - | - |
| topBorder | 是否显示顶部边框 | boolean | - | false |
| bottomBorder | 是否显示底部边框 | boolean | - | true |
| pressedColor | 按下的背景颜色 | string | - | - |
| innerStyle | 自定义样式 | ViewStyle | - | - |
| iconStyle | 自定义左侧图标样式 | object | - | - |
| rightIconStyle | 自定义右侧图标样式 | object | - | - |
| padding | 强制控制按钮的边距。如果是数字，则设置所有方向边距;两位数组 [vetical,horizontal];四位数组 [top,right,down,left] | number ︱ number[] | - | - |
Slots
| 名称 | 说明 |
|---|---|
| default | 单元格的内容 |
| left | 自定义左侧渲染，优先级高会覆盖 title，label，leftIcon插槽 |
| right | 自定义右侧渲染，优先级高会覆盖 rightPrepend，value，rightIcon插槽 |
| leftIcon | 自定义左侧图标渲染 |
| title | 自定义标题渲染 |
| label | 自定义标题下方的描述信息渲染 |
| rightPrepend | 自定义右侧内容前的渲染 |
| value | 自定义右侧内容渲染 |
| rightIcon | 自定义右侧图标渲染 |
Events
| 名称 | 说明 | 参数 |
|---|---|---|
| click | 点击事件 | $event |
CellGroup
Props
| 名称 | 说明 | 类型 | 必填 | 默认值 |
|---|---|---|---|---|
| title | 分组标题 | string | - | - |
| round | 是否展示为圆角卡片风格 | boolean | - | false |
| inset | 是否展示为内边距风格 | boolean | - | false |
| showTopMargin | 是否显示没有标题时顶部边距。默认是 | boolean | - | true |
| showBottomMargin | 是否显示底部边距。默认否 | boolean | - | false |
| showTopMarginSize | 是否显示顶部边距。默认是 10rpx | boolean | - | true |
| titleStyle | 标题的样式 | object | - | - |
| titleDark | 标题背景是否变暗 | boolean | - | false |
CellContext
CellContext 是 Cell 组件提供的上下文功能，用于子组件设置单元格的点击事件。
导入
js
import { useCellContext } from '@/components/basic/CellContext.ts'使用方法
在 Cell 组件的子组件中，可以通过 useCellContext 钩子获取上下文，并设置点击事件：
vue
<script setup lang="ts">
import { useCellContext, onMounted } from 'vue'
// 获取单元格上下文
const cellContext = useCellContext()
onMounted(() => {
// 设置单元格点击事件处理函数
cellContext.setOnClickListener(() => {
console.log('Cell clicked from child component')
// 执行点击逻辑
})
})
</script>API
| 方法 | 说明 | 参数 |
|---|---|---|
useCellContext() | 获取单元格上下文 | 无，返回 CellContext 对象 |
CellContext 接口
| 方法 | 说明 | 参数 |
|---|---|---|
setOnClickListener(listener) | 设置单元格点击事件监听器 注意：只能设置一次，后续设置会覆盖之前的设置 | listener: () => void - 点击事件处理函数 |
主题变量
| 名称 | 类型 | 默认值 |
|---|---|---|
| CellBackground | string | white |
| CellSize | string or number | 'medium' |
| CellPressedColor | string | pressed.white |
| CellPadding | - | [] |
| CellBottomBorder | boolean | true |
| CellTopBorder | boolean | false |
| CellIconWidth | number | 20 |
| CellIconSize | number | 15 |
| CellBorderColor | string | boder.default |
| CellBorderWidth | number | 2 |
| CellFontSizeLarge | number | 31 |
| CellFontSizeMedium | number | 26 |
| CellFontSizeSmall | number | 23 |
| CellTitleColor | string | text |
| CellLabelColor | string | text.second |
| CellValueColor | string | text.second |
| CellHeightLarge | number | 125 |
| CellHeightMedium | number | 100 |
| CellHeightSmall | number | 80 |
| CellPaddingLarge | number | 15 |
| CellPaddingMedium | number | 10 |
| CellPaddingSmall | number | 7 |
| CellPaddingHorizontal | number | 20 |
| CellValuePaddingHorizontal | number | 20 |
| CellGroupDarkTitleBackgroundColor | string | border.light |
| CellGroupInsetPaddingHorizontal | number | 10 |
| CellGroupPaddingHorizontal | number | 20 |
| CellGroupTitleDark | boolean | false |
| CellGroupInset | boolean | false |
| CellGroupShowTopMargin | boolean | true |
| CellGroupShowBottomMargin | boolean | false |
| CellGroupTopMarginSize | number | 10 |
| CellGroupTitleColor | string | text.second |
| CellGroupTitlePaddingTop | number | 24 |
| CellGroupTitlePaddingBottom | number | 12 |
| CellGroupInsetBorderRadius | number | 20 |
| CellGroupInsetBackgroundColor | string | white |
| CellGroupInsetMarginVertical | number | 0 |
| CellGroupInsetMarginHorizontal | number | 30 |