Card 卡片

介绍

卡片组件用于展示结构化信息，支持图片、标题、描述等内容，常用于列表展示或内容卡片。

导入

import Card from '@/components/display/Card.vue'

用法

基础用法

基础卡片包含标题、描述、额外内容和自定义内容区域。

<template>
  <Card title="卡片标题" desc="卡片描述" extra="额外内容" :icon="IconPlaceholder">
    <text>这是一个基础卡片的示例，此处为自定义内容区域，自行控制内容样式。</text>
  </Card>
</template>

通栏展示

设置 radius 为 0 可以实现通栏展示效果。

<template>
  <Card title="卡片标题" extra="额外内容" :radius="0" :icon="IconPlaceholder">
    <text>这是一个基础卡片的示例，此处为自定义内容区域，自行控制内容样式。</text>
  </Card>
</template>

图片卡片

卡片支持添加图片，并可在图片上显示标题、描述等信息。

<template>
  <Card 
    title="NaEasy UI" 
    extra="21分钟"
    :icon="Logo"
    image="https://imengyu.top/assets/images/test/2.jpg"
    imageDesc="NaEasy UI 是一款轻量、简洁的 Uniapp 移动端组件库。"
  />
</template>

内容卡片

可以将图片信息显示在图片下方，适合作为内容卡片使用。

<template>
  <Card 
    :icon="Logo"
    image="https://imengyu.top/assets/images/test/2.jpg"
    imageInfoPosition="bottom"
    imageDesc="NaEasy UI 是一款轻量、简洁的 Uniapp 移动端组件库。"
  >
    <FlexRow :gap="10">
      <Tag type="primary" scheme="light" text="推荐" size="small" />
      <Tag type="primary" scheme="light" text="新文章" size="small" />
    </FlexRow>
  </Card>
</template>

API 参考

Card

卡片组件。

Props

名称	说明	类型	必填	默认值
title	卡片标题	string	否	-
desc	卡片描述	string	否	-
extra	卡片标题额外内容	string	否	-
icon	卡片图标	string	否	-
iconProps	卡片图标属性	IconProps	否	-
radius	卡片圆角	number	否	15
backgroundColor	卡片背景颜色	string	否	'white'
viewProps	卡片视图属性	FlexProps	否	-
content	卡片内容	string	否	-
image	卡片图片	string	否	-
imageProps	卡片图片属性	ImageProps	否	-
imageHeight	卡片图片高度	number	否	320
imageTitle	卡片图片标题	number	否	-
imageDesc	卡片图片描述	string	否	-
imageExtra	卡片图片额外内容	string	否	-
imageInfoPosition	卡片图片信息位置 * over 图片底部渐变显示 * bottom 图片下方单独显示	'over' | 'bottom'	否	'over'

Slots

名称	说明
default	卡片内容区域，等同于 content 属性
prefix	卡片前缀内容
suffix	卡片后缀内容
extra	卡片标题额外内容，等同于 extra 属性
imageExtra	卡片图片额外内容，等同于 imageExtra 属性

Events

名称	说明	参数
click	点击事件	$event

主题变量

名称	类型	默认值	说明
CardRadius	number	15	卡片圆角
CardImageDefaultHeight	number	320	卡片图片默认高度
CardImageInfoPosition	string	'over'	卡片图片信息默认位置
CardBackgroundColor	string	'white'	卡片背景颜色
CardTitlePadding	number	20	卡片标题内边距