# CellItem/CellGroup 单元格
单元格组件
# 引入说明
TIP
import CellItem from "jimoui/components/CellItem/CellItem";
import CellGroup from "jimoui/components/CellGroup/CellGroup";
1
2
2
# 代码演示
TIP
<CellGroup>
<CellItem
leftText="单行列表"
rightIcon=""
rightText="详细信息"
></CellItem>
</CellGroup>
<CellGroup>
<CellItem
v-for="(moduleItem, i) in item.items"
:key="i"
:leftText="moduleItem.title"
@clickCell="jumpHandler('cell', moduleItem)"
></CellItem>
</CellGroup>
<CellItem
leftText="单行列表"
leftTextSub="描述信息"
rightTextColor="#ff680a"
></CellItem>
<CellItem
leftText="双行列表"
leftTextSub="描述信息"
rightIcon=""
rightText="详细信息"
></CellItem>
<CellItem
leftText="免费领取"
leftTextSub="描述信息"
leftIcon="https://img.dmallcdn.com/dshop/202009/991346e3-f819-4ae0-853b-305c0da9138d"
rightText="先到先得"
></CellItem>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
# 属性
配置 | 用途 | 取值 | 使用描述 |
---|---|---|---|
:bgColor | cell背景色 | String | 默认#ffffff。 |
:leftIcon | 左侧图标 | String | 默认不展示。传入链接则展示。 |
:leftIconSize | 左侧图标大小 | default/small | 默认default 50px。small 40px。 |
:leftText | 左侧文案内容 | String | 左侧文案内容。 |
:leftTextColor | 左侧文案字体颜色 | String | 默认为多点橙色 "#222222",可修改任意色值。 |
:leftTextSize | 左侧文案字体大小 | String | 默认为30px。 |
:leftTextSub | 左侧副文案内容 | String | 左侧副文案内容。 |
:leftTextSubColor | 左侧副文案字体颜色 | String | 默认为多点橙色 "#999999",可修改任意色值。 |
:leftTextSubSize | 左侧副文案字体大小 | String | 默认为24px。 |
:rightIcon | 右侧图标 | String | 默认展示 > 传""则不展示右侧图标,或更改其他图标。 |
:rightText | 右侧文案内容 | String | 左侧副文案内容 |
:rightTextColor | 右侧文案字体颜色 | String | 默认为多点橙色 "#999999",可修改任意色值。 |
:rightTextSize | 右侧文案字体大小 | String | 默认为26px。 |
:cellHeight | 不带左侧图标cell高度 | String | 默认高度120px。 |
:imgCellHeight | 带左侧图标cell高度 | String | 默认高度132px。 |
@clickCell | 监听Cell点击事件 | Event | 监听Cell点击事件 |