# CellItem/CellGroup 单元格

单元格组件

# 引入说明

TIP

import CellItem from "jimoui/components/CellItem/CellItem";
import CellGroup from "jimoui/components/CellGroup/CellGroup";
1
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

# 属性

配置 用途 取值 使用描述
: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点击事件
  • iOS
  • Android
  • Web
  • MP
v1.0.0