Card 卡片

用于信息展示的卡片容器。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

<zq-card title="标题">
  <text>卡片内容</text>
</zq-card>

带图标的标题

通过 icon 属性设置标题左侧图标。

<zq-card title="标题" icon="file-text">
  <text>带图标的卡片</text>
</zq-card>

展示额外信息

通过 extra 属性或 extra 插槽在标题右侧展示额外信息。

<zq-card title="标题" extra="更多">
  <text>卡片内容</text>
</zq-card>

<zq-card title="标题">
  <template #extra>
    <zq-tag type="primary" size="small" text="标签" />
  </template>
  <text>卡片内容</text>
</zq-card>

封面图片

通过 thumb 属性设置封面图片。

<zq-card title="标题" thumb="https://example.com/image.jpg">
  <text>带封面图片的卡片</text>
</zq-card>

底部操作区

通过 footer 插槽设置底部操作区。

<zq-card title="标题">
  <text>卡片内容</text>
  <template #footer>
    <zq-button type="primary" size="mini" text="操作" />
    <zq-button size="mini" text="取消" />
  </template>
</zq-card>

自定义头部

通过 header 插槽完全自定义头部内容。

<zq-card>
  <template #header>
    <view style="padding: 24rpx 32rpx; display: flex; align-items: center;">
      <zq-avatar :size="'small'" text="A" />
      <text style="margin-left: 16rpx;">自定义头部</text>
    </view>
  </template>
  <text>卡片内容</text>
</zq-card>

边框样式

通过 :shadow="false" 和 border 属性切换为边框样式。

<zq-card title="边框卡片" :shadow="false" border>
  <text>使用边框代替阴影</text>
</zq-card>

全宽卡片

通过 full 属性设置为全宽卡片（无左右边距和圆角）。

<zq-card title="全宽卡片" full>
  <text>卡片内容</text>
</zq-card>

API

Props

参数	说明	类型	默认值
title	卡片标题	string	''
icon	标题左侧图标名称	string	''
extra	标题右侧额外信息	string	''
thumb	封面图片地址	string	''
shadow	是否显示阴影	boolean	true
border	是否显示边框	boolean	false
full	是否为全宽模式（无边距和圆角）	boolean	false

Events

事件名	说明	回调参数
click	点击卡片时触发	event: Event

Slots

名称	说明
default	卡片主体内容
header	自定义头部内容（会覆盖 title、icon、extra）
extra	自定义标题右侧内容
footer	底部操作区内容

主题定制

变量名	说明
--color-bg-card	卡片背景色
--color-text-primary	标题/图标颜色
--color-text-secondary	额外信息文字颜色
--color-divider	头部/底部分割线颜色