Card 卡片

信息容器组件，支持标题、操作区插槽、阴影模式和自定义内容样式。

基础用法

通过 header 属性或 header 插槽设置卡片标题。

卡片标题

这是卡片的内容区域。可以放置任何内容。

<template>
  <ZcCard header="卡片标题">
    <p>这是卡片的内容区域。可以放置任何内容。</p>
  </ZcCard>
</template>

阴影模式

通过 shadow 属性控制阴影显示：always（默认）、hover（悬停时显示）、never（无阴影）。

Always 阴影

Hover 阴影

Never 无阴影

<template>
  <ZcSpace>
    <ZcCard shadow="always" style="width: 200px;">
      <p>Always 阴影</p>
    </ZcCard>
    <ZcCard shadow="hover" style="width: 200px;">
      <p>Hover 阴影</p>
    </ZcCard>
    <ZcCard shadow="never" style="width: 200px;">
      <p>Never 无阴影</p>
    </ZcCard>
  </ZcSpace>
</template>

自定义 Header 和 Footer

使用 header 和 footer 插槽自定义卡片头尾内容。

自定义标题

卡片正文内容

卡片底部

<template>
  <ZcCard>
    <template #header>
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <span>自定义标题</span>
        <ZcButton size="small" type="primary">操作按钮</ZcButton>
      </div>
    </template>
    <p>卡片正文内容</p>
    <template #footer>
      <span>卡片底部</span>
    </template>
  </ZcCard>
</template>

自定义 Body 样式

通过 bodyStyle 和 bodyClass 自定义内容区样式。

内边距调整

这个卡片的内容区域有自定义内边距。

<template>
  <ZcCard header="内边距调整" body-style="padding: 30px;">
    <p>这个卡片的内容区域有自定义内边距。</p>
  </ZcCard>
</template>

Card API

Props

参数	说明	类型	默认值
header	卡片标题文本	string	—
shadow	阴影显示模式	'always' | 'hover' | 'never'	'always'
bodyStyle	内容区自定义样式	string | Record<string, string>	—
bodyClass	内容区自定义类名	string	—

Slots

插槽名	说明
default	卡片正文内容
header	卡片标题（覆盖 header 属性）
footer	卡片底部内容