卡片组件一般用于多个列表条目，且风格统一的场景，提供了灵活的配置选项和插槽，可根据需求自定义卡片的外观和内容。

基本使用

组件的头部信息可以通过参数配置，主体和底部的信息需要通过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