华玥组件库

中文

English

中文

English

Appearance

Card 卡片组件 ​

卡片组件一般用于多个列表条目，且风格统一的场景。

📌平台差异说明 ​

APP(vue)H5微信小程序支付宝小程序
✔✔✔✔

🏯基本使用示例 ​

html
<template>
    <hy-card title="标题"></hy-card>
</template>

带缩略图和副标题的卡片 ​

html
<template>
    <hy-card
        title="刘德华"
        sub-title="简介描述文字"
        right-text="2020-05-15"
        thumb="https://example.com/avatar.jpg"
        thumb-width="40"
        thumbCircle
        full
    ></hy-card>
</template>

自定义阴影 ​

html
<template>
    <hy-card 
        title="自定义阴影"
        box-shadow="0 0 10rpx 10rpx rgba(0, 0, 0, 0.5)"
    ></hy-card>
</template>

使用自定义插槽 ​

html
<template>
    <hy-card 
        title="素胚勾勒出青花，笔锋浓转淡"
        sub-title="2020-05-15"
        thumb="http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg"
        full
    >
        <template #body>
            <view class="u-body-item">
                <view class="u-body-item-title">瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半</view>
                <image 
                    src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg" 
                    mode="aspectFill"
                ></image>
            </view>
        </template>
        <template #footer>
            <hy-icon name="chat-fill" size="25" label="30评论"></hy-icon>
        </template>
    </hy-card>
</template>

<style scoped lang="scss">
.u-body-item {
    font-size: 32rpx;
    padding: 20rpx 10rpx;
    display: flex;
    justify-content: space-between;
}

.u-body-item image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 8rpx;
    margin-left: 12rpx;
}
</style>

控制头部和尾部显示 ​

html
<template>
    <view>
        <hy-card 
            title="只显示头部"
            :showFoot="false"
        ></hy-card>
        
        <hy-card 
            title="只显示主体"
            :showHead="false"
            :showFoot="false"
        >
            <template #body>
                <view>这是卡片主体内容</view>
            </template>
        </hy-card>
    </view>
</template>

自定义内边距 ​

html
<template>
    <hy-card 
        title="自定义内边距"
        :paddingHead="20"
        :paddingBody="30"
        :paddingFoot="10"
    ></hy-card>
</template>

API ​

Card Props ​

参数说明类型默认值
full卡片与屏幕两侧是否留空隙booleanfalse
title头部左边的标题string-
title-color标题颜色string-
title-size标题字体大小，单位pxstring|number-
sub-title副标题string-
sub-title-size副标题字体大小string|number-
sub-title-color副标题字体颜色string-
border是否显示边框booleanfalse
index用于标识点击了第几个卡片string|number-
margin卡片与屏幕两边和上下元素的间距，需带单位，如"30rpx 20rpx"string0 0 20rpx
border-radius卡片整体的圆角值，单位pxstring|number8px
head-style头部自定义样式，对象形式CSSProperties-
body-style主体自定义样式，对象形式CSSProperties-
foot-style底部自定义样式，对象形式CSSProperties-
head-border-bottom是否显示头部的下边框booleanfalse
foot-border-top是否显示底部的上边框booleanfalse
thumb缩略图路径，如设置将显示在标题的左边，不建议使用相对路径(支持组件库的图标)string-
thumb-width缩略图的宽度，高等于宽，单位pxstring|number30px
thumb-circle缩略图是否为圆形booleanfalse
rightText右边内容string-
right-text-color右边内容颜色string-
right-text-size右边内容字体大小string|number-
padding给head，body，foot部的内边距，见上方说明，单位rpxstring|number10px
paddingHead头部内边距string|number-
paddingBody中部内边距string|number-
paddingFoot尾部内边距string|number-
show-head是否显示头部booleantrue
show-foot是否显示尾部booleantrue
box-shadow卡片外围阴影，字符串形式string|booleantrue
customStyle自定义需要用到的外部样式CSSProperties-
customClass自定义外部类名string-

Events ​

事件名说明回调参数
click整个卡片任意位置被点击时触发index: 用户传递的标识符
head-click卡片头部被点击时触发index: 用户传递的标识符
body-click卡片主体部分被点击时触发index: 用户传递的标识符
foot-click卡片底部部分被点击时触发index: 用户传递的标识符

Slots ​

插槽名说明接收值
header自定义卡片头部内容-
body自定义卡片主体部分内容-
footer自定义卡片底部部分内容-
13:35