外观
Card 卡片
约 1516 字大约 5 分钟
2025-10-31
卡片组件一般用于多个列表条目，且风格统一的场景，提供了灵活的配置选项和插槽，可根据需求自定义卡片的外观和内容。
基本使用
组件的头部信息可以通过参数配置，主体和底部的信息需要通过slot传入。
<template>
<un-card title="我是标题" headerBorderBottom>
<text class="card-text">这是一个基础卡片示例，展示了卡片的基本结构和样式。</text>
</un-card>
</template>
<style lang="scss" scoped>
.card-text {
font-size: 14px;
color: #6b7280;
}
</style>带副标题的卡片
通过subTitle参数可以为卡片添加副标题。
<un-card title="我是标题" sub-title="我是副标题" headerBorderBottom>
<text class="card-text">这是一个基础卡片示例，展示了卡片的基本结构和样式。</text>
</un-card>无内容的卡片
可以只显示卡片头部信息，不包含主体内容。
<un-card title="我是标题" extra="额外内容"></un-card>无标题的卡片
通过showHeader参数可以隐藏卡片头部，只显示主体内容。
<un-card :showHeader="false">
<text class="card-text">我只有内容，没有标题</text>
</un-card>显示阴影的卡片
通过shadow参数可以为卡片添加阴影效果。
<un-card title="我是标题" shadow>
<text class="card-text">这是一个基础卡片示例，展示了卡片的基本结构和样式。</text>
</un-card>带缩略图的卡片
通过thumb参数可以为卡片添加缩略图，显示在标题的左侧。
<un-card
title="基础卡片"
sub-title="我是副标题"
thumb="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg"
headerBorderBottom
>
<text class="card-text">这是一个基础卡片示例，展示了卡片的基本结构和样式。</text>
</un-card>带操作按钮的卡片
通过footer插槽可以为卡片添加底部操作按钮。
<un-card title="订单号：202412110001" extra="已完成" headerBorderBottom footerBorderTop>
<text class="card-text">这是一个基础卡片示例，展示了卡片的基本结构和样式。</text>
<template #footer>
<view class="card-footer">
<un-button text="分享" customStyle="margin-right: 8px;padding: 0 15px" shape="circle" size="small" type="primary" plain></un-button>
<un-button text="查看详情" customStyle="padding: 0 15px" shape="circle" size="small" type="primary"></un-button>
</view>
</template>
</un-card>
<style lang="scss" scoped>
.card-footer {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
</style>商品卡片示例
通过自定义插槽和样式，可以创建商品展示卡片。
<un-card padding="0" class="product-card">
<un-image src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg" mode="aspectFill" width="100%" height="200"/>
<view class="un-card__body product-info">
<text class="product-title">苹果 iPhone 15 Pro Max (A3108) 256GB 原色钛金属 支持移动联通电信5G 双卡双待手机</text>
<view class="product-price-row">
<text class="product-price">¥9999</text>
<text class="product-original-price">¥10999</text>
</view>
<view class="product-footer">
<text class="product-sales">销量：12890</text>
<un-button text="立即购买" type="primary" size="small" shape="circle"></un-button>
</view>
</view>
</un-card>
<style lang="scss" scoped>
.product-card {
border-radius: 8px;
overflow: hidden;
}
.product-info {
padding: 12px;
}
.product-title {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
line-height: 1.4;
color: #333;
margin-bottom: 10px;
}
.product-price-row {
display: flex;
margin-bottom: 10px;
}
.product-price {
font-size: 20px;
font-weight: bold;
color: #ff4d4f;
margin-right: 8px;
}
.product-original-price {
font-size: 12px;
color: #999;
}
.product-footer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.product-sales {
font-size: 12px;
color: #999;
}
</style>API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 头部左边的标题 | string | - |
| titleColor | 标题颜色 | string | #303133 |
| titleSize | 标题字体大小，单位rpx | string | number | 30 |
| subTitle | 头部右边的副标题 | string | - |
| subTitleColor | 副标题颜色 | string | #909399 |
| subTitleSize | 副标题字体大小，单位rpx | string | number | 26 |
| border | 是否显示边框 | boolean | false |
| index | 用于标识点击了第几个卡片 | string | number | - |
| shadow | 是否显示卡片阴影 | boolean | false |
| round | 卡片整体的圆角值，单位rpx | string | number | 16 |
| headerStyle | 头部自定义样式 | string | object | - |
| bodyStyle | 中部自定义样式 | string | object | - |
| footerStyle | 底部自定义样式 | string | object | - |
| headerBorderBottom | 是否显示头部的下边框 | boolean | true |
| footerBorderTop | 是否显示底部的上边框 | boolean | true |
| extra | 头部右边的额外内容 | string | - |
| thumb | 缩略图路径，显示在标题的左边 | string | - |
| thumbWidth | 缩略图的宽度，高等于宽，单位rpx | string | number | 60 |
| thumbCircle | 缩略图是否为圆形 | boolean | false |
| thumbRadius | 缩略图圆角值 | string | number | - |
| padding | 给head，body，foot的内边距 | string | number | - |
| showHeader | 是否显示头部 | boolean | true |
Slots
| 名称 | 说明 |
|---|---|
| default | 卡片主体内容 |
| header | 自定义卡片头部内容 |
| footer | 自定义卡片底部内容 |
Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| click | 整个卡片任意位置被点击时触发 | (index: string | number) => void |
| headerClick | 卡片头部被点击时触发 | (index: string | number) => void |
| bodyClick | 卡片主体部分被点击时触发 | (index: string | number) => void |
| footerClick | 卡片底部部分被点击时触发 | (index: string | number) => void |
Scss 变量
关于组件 SCSS 变量的用法，请参考 组件 SCSS 变量用法。
| 变量名 | 默认值 | 说明 |
|---|---|---|
| $un-card-border-radius | $radius-base | 卡片基础圆角 |
| $un-card-bg-color | $bg-color-container | 卡片背景颜色 |
| $un-card-border-color | $border-color-light | 卡片边框颜色 |
| $un-card-box-shadow | 0 4px 8px rgba(0, 0, 0, 0.1) | 卡片阴影样式 |
| $un-card-header-padding | 16px | 卡片头部内边距 |
| $un-card-header-border-bottom-color | $border-color-light | 卡片头部下边框颜色 |
| $un-card-thumb-width | 44px | 卡片缩略图宽度 |
| $un-card-thumb-height | 44px | 卡片缩略图高度 |
| $un-card-thumb-border-radius | $radius-base | 卡片缩略图圆角 |
| $un-card-thumb-margin-right | 8px | 卡片缩略图右边距 |
| $un-card-title-text-font-size | $text-lg | 卡片标题字体大小 |
| $un-card-title-text-color | $text-color | 卡片标题颜色 |
| $un-card-title-subtitle-font-size | $text-base | 卡片副标题字体大小 |
| $un-card-title-subtitle-color | $text-color-muted | 卡片副标题颜色 |
| $un-card-title-subtitle-margin-top | 6px | 卡片副标题上边距 |
| $un-card-extra-font-size | $text-base | 卡片额外内容字体大小 |
| $un-card-extra-color | $text-color-muted | 卡片额外内容颜色 |
| $un-card-body-padding | 16px | 卡片主体内边距 |
| $un-card-footer-padding | 16px | 卡片底部内边距 |
| $un-card-footer-border-top-color | $border-color-light | 卡片底部上边框颜色 |