Card 组件：一个响应式、可定制的卡片

应用场景

Card 组件广泛应用于各种需要展示内容的场景，例如：

• 展示个人资料
• 显示产品或服务信息
• 展示新闻或博客文章
• 创建仪表板或控制面板

基本功能

Card 组件提供了一系列基本功能，包括：

• 可定制的标题和内容区域
• 可插槽的头部和主体内容
• 支持多种尺寸和形状
• 内置阴影效果，增强视觉层次感

功能实现步骤及关键代码分析

1. 导入组件

import { Card, Col, Row, Button, Badge } from "vant";

2. 创建 Card 实例

const data = ref({
  shoulderPress: {
    title: "Shoulder Press",
    duration: "10 mins",
  },
  bicepCurls: {
    title: "Bicep Curls",
    duration: "10 mins",
  },
  // ...
});

3. 使用插槽自定义内容

<template #header>
  <div class="flex items-center justify-between">
    <span>{{ data.shoulderPress.title }}</span>
    <Button type="primary" size="small">Start</Button>
  </div>
</template>

<template #body>
  <div class="flex items-center justify-between">
    <div class="flex items-center">
      <img src="..." alt="avatar" />
      <div class="ml-4">
        <h3 class="text-lg font-semibold">{{ data.shoulderPress.title }}</h3>
        <p class="text-sm text-gray-500">{{ data.shoulderPress.duration }}</p>
      </div>
    </div>
    <div>
      <Button type="primary" size="small">15:00</Button>
    </div>
  </div>
</template>

4. 使用 Row 和 Col 组件布局卡片

<Row>
  <Col span="6">
    <Card>
      <!-- ... -->
    </Card>
  </Col>
  <!-- ... -->
</Row>

总结与展望

开发这段代码的过程让我深入了解了 Card 组件的特性和使用方法。它是一个功能强大且易于使用的组件，可以轻松创建响应式、可定制的卡片。

未来，我计划扩展该卡片功能，使其支持：

• 拖放排序
• 动态加载数据
• 自定义样式主题

通过这些增强，Card 组件将成为构建更复杂和交互式界面的宝贵工具。