94 lines
3.1 KiB
Markdown
94 lines
3.1 KiB
Markdown
|
---
|
|||
|
|
name: arco-vue-card
|
|||
|
|
description: "Arco Design Vue 卡片 Card 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-card>`、属性、事件、插槽、示例和实现细节。"
|
|||
|
|
user-invocable: false
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 卡片 Card
|
|||
|
|
|
|||
|
|
## 简介
|
|||
|
|
|
|||
|
|
常规的内容容器，可承载文字、列表、图片、段落，常用于模块划分和内容概览。
|
|||
|
|
|
|||
|
|
## 基本用法
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<template>
|
|||
|
|
<div :style="{ display: 'flex' }">
|
|||
|
|
<a-card :style="{ width: '360px' }" title="Arco Card">
|
|||
|
|
<template #extra>
|
|||
|
|
<a-link>More</a-link>
|
|||
|
|
</template>
|
|||
|
|
ByteDance's core product, Toutiao ("Headlines"), is a content platform in
|
|||
|
|
China and around the world. Toutiao started out as a news recommendation
|
|||
|
|
engine and gradually evolved into a platform delivering content in various
|
|||
|
|
formats.
|
|||
|
|
</a-card>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## API
|
|||
|
|
|
|||
|
|
### `<card>` 属性
|
|||
|
|
|
|||
|
|
|参数名|描述|类型|默认值|
|
|||
|
|
|---|---|---|:---:|
|
|||
|
|
|bordered|是否有边框|`boolean`|`true`|
|
|||
|
|
|loading|是否为加载中|`boolean`|`false`|
|
|||
|
|
|hoverable|是否可悬浮|`boolean`|`false`|
|
|||
|
|
|size|卡片尺寸|`'medium' \| 'small'`|`'medium'`|
|
|||
|
|
|header-style|自定义标题区域样式|`CSSProperties`|`() => ({})`|
|
|||
|
|
|body-style|内容区域自定义样式|`CSSProperties`|`() => ({})`|
|
|||
|
|
|title|卡片标题|`string`|`-`|
|
|||
|
|
|extra|卡片右上角的操作区域|`string`|`-`|
|
|||
|
|
|
|||
|
|
### `<card>` 插槽
|
|||
|
|
|
|||
|
|
|插槽名|描述|参数|
|
|||
|
|
|---|:---:|---|
|
|||
|
|
|actions|卡片底部的操作组|-|
|
|||
|
|
|cover|卡片封面|-|
|
|||
|
|
|extra|卡片右上角的操作区域|-|
|
|||
|
|
|title|卡片标题|-|
|
|||
|
|
|
|||
|
|
### `<card-meta>` 属性
|
|||
|
|
|
|||
|
|
|参数名|描述|类型|默认值|
|
|||
|
|
|---|---|---|:---:|
|
|||
|
|
|title|标题|`string`|`-`|
|
|||
|
|
|description|描述|`string`|`-`|
|
|||
|
|
|
|||
|
|
### `<card-meta>` 插槽
|
|||
|
|
|
|||
|
|
|插槽名|描述|参数|
|
|||
|
|
|---|:---:|---|
|
|||
|
|
|description|描述|-|
|
|||
|
|
|title|标题|-|
|
|||
|
|
|avatar|头像|-|
|
|||
|
|
|
|||
|
|
### `<card-grid>` 属性
|
|||
|
|
|
|||
|
|
|参数名|描述|类型|默认值|
|
|||
|
|
|---|---|---|:---:|
|
|||
|
|
|hoverable|是否可以悬浮|`boolean`|`false`|
|
|||
|
|
|
|||
|
|
## 常用模式
|
|||
|
|
|
|||
|
|
- **鼠标悬浮样式**：指定 `hoverable` 来为卡片添加鼠标悬浮样式，同时你可以通过样式覆盖来自定义悬浮样式。
|
|||
|
|
- **无边框卡片**：设置 `bordered` 为 `false` 来使用无边框卡片。
|
|||
|
|
- **简洁卡片**：卡片可以只有内容区域。
|
|||
|
|
- **更灵活的内容展示**：使用 `Card.Meta` 支持更加灵活的内容（封面、头像、 标题、描述信息）
|
|||
|
|
- **栅格卡片**：在系统概览页面常常和栅格进行配合。
|
|||
|
|
- **网络型内嵌卡片**：通过 `Card.Grid` 来使用卡片内容区隔模式。
|
|||
|
|
- **内部卡片**：卡片中可以嵌套其他卡片组件。
|
|||
|
|
- **支持更多内容配置**：`actions` slot 可以用于展示底部按钮组。
|
|||
|
|
|
|||
|
|
## 最佳实践
|
|||
|
|
|
|||
|
|
- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
|
|||
|
|
- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
|
|||
|
|
- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
|
|||
|
|
- 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
|
|||
|
|
- 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。
|