华玥组件库

中文

English

中文

English

Appearance

Card 卡片组件 ​

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

温馨提示

本项目参考了 uView-Plus 开源项目的组件开发方式，基于 Vue 3 和 TypeScript 实现了自定义组件。目前该组件仍处于测试阶段。
感谢 uView-Plus 开源项目及其团队成员的贡献，他们的组件开发思路为本项目提供了宝贵地参考。如果需要了解更多组件开发细节，可以参考uView-Plus的 card组件 的代码实现。

平台差异说明 ​

APP(vue)H5微信小程序
✔✔✔

基本使用示例 ​

html
<!-- 全局使用 -->
<hy-card title="标题"></hy-card>
<!-- 单个组件引入 -->
<HyCard title="标题"></HyCard>
ts
import { HyCard } from "hy-app"

卡片阴影 ​

html
<template>
    <hy-card box-shadow="0 0 10rpx 10rpx rgba(0, 0, 0, 0.5)"></hy-card>
</template>

使用自定义插槽 ​

html
<template>
    <hy-card :title="title" :sub-title="subTitle" :thumb="thumb">
        <template #body>
            <view class="" slot="body">
                <view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
                    <view class="u-body-item-title u-line-2">瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半</view>
                    <image src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg" mode="aspectFill"></image>
                </view>
                <view class="u-body-item u-flex u-row-between u-p-b-0">
                    <view class="u-body-item-title u-line-2">釉色渲染仕女图韵味被私藏，而你嫣然的一笑如含苞待放</view>
                    <image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg" mode="aspectFill"></image>
                </view>
            </view>
        </template>
        <template #footer>
            <view>
                <hy-icon name="chat-fill" size="34" color="" label="30评论"></hy-icon>
            </view>
        </template>
    </-card>
</template>

<script>
    export default {
        data() {
            return {
                title: '素胚勾勒出青花，笔锋浓转淡',
                subTitle: '2020-05-15',
                thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
            };
        }
    };
</script>

<style scoped lang="scss">
    .u-card-wrap {
        background-color: #F8F8F8;
        padding: 1px;
    }

    .u-body-item {
        font-size: 32rpx;
        color: #333;
        padding: 20rpx 10rpx;
    }

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

API ​

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

Events ​

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

Slots ​

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