# bz-cell 单元格

# 基本用法

单元格为列表中的单个展示项。

扫码预览

<template>
    <view class="demo-ui-page">
        <view class="demo-content">
            <view class="demo-title">bz-cell 单元格</view>
            <demo-cell
                noPadding
                cellBgColor="#f7f7f7"
            >
                <bz-cell
                    title="标题1"
                    showArrow
                    showDivider
                ></bz-cell>
                <bz-cell
                    title="标题2"
                    showArrow
                    showDivider
                    >内容2</bz-cell
                >
                <bz-cell title="标题3">内容</bz-cell>
            </demo-cell>
            <demo-cell
                title="左边装饰器"
                noPadding
                cellBgColor="#f7f7f7"
            >
                <bz-cell
                    title="竖线装饰"
                    sub-title="二标题"
                    left-type="line"
                    showDivider
                ></bz-cell>
                <bz-cell
                    title="圆形装饰"
                    left-type="circle"
                    showDivider
                ></bz-cell>
                <bz-cell
                    title="方形装饰"
                    sub-title="二标题"
                    left-type="square"
                    showDivider
                ></bz-cell>
                <bz-cell
                    title="自定义左边装饰器"
                    sub-title="二标题"
                >
                    <template v-slot:decoration>
                        <image
                            class="demo-image"
                            src="https://hi.zhipin.com/images/logo.png"
                        ></image>
                    </template>
                </bz-cell>
            </demo-cell>
            <demo-cell
                title="右边插槽自定义"
                noPadding
                cellBgColor="#f7f7f7"
            >
                <bz-cell
                    title="右边输入框"
                    showDivider
                >
                    <input
                        type="text"
                        placeholder="请输入内容"
                    />
                </bz-cell>
                <bz-cell title="右边图片">
                    <image
                        class="demo-image"
                        src="https://hi.zhipin.com/images/logo.png"
                    ></image>
                </bz-cell>
            </demo-cell>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.demo-image {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}
</style>

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

展开刷新关闭

# 属性说明

属性名	类型	默认值	可选值	说明
color	String	-	-	主标颜色（这里主要针对于左边的自带装饰器
bgColor	String	-	背景颜色	背景颜色
leftType	String	-	line、circle、square	标题装饰类型优先级比自定义插槽高
title	String	-	-	主标题
subTitle	String	-	-	副标题
titleFontSize	String	14px	-	主标题字体大小
titleColor	String	#111	-	主标题字体颜色
subTitleFontSize	String	12px	-	副标题字体大小
subTitleColor	String	#999	-	副标题字体颜色
showArrow	Boolean	false	-	展示右侧箭头
showDivider	Boolean	false	-	展示分割线
noPadding `1.0.1`	Boolean	false	-	去除左右 padding
@click	Handler	-	-	点击事件

← bz-button 按钮 bz-divider 分割线 →