Vue 3 Ant Design 卡片组件开发

应用场景介绍

本卡片组件适用于展示信息丰富的卡片式内容，如商品列表、新闻摘要、用户资料等。它提供了一系列开箱即用的功能，如标题、描述、标签、评级等。

基本功能介绍

该卡片组件具有以下基本功能：

• **标题和描述：**显示卡片的标题和描述信息。
• **标签：**可添加标签来标记卡片的类别或状态。
• **评级：**显示卡片的星级评级。
• **信息图标：**提供一个图标按钮，用于触发其他操作或显示更多信息。
• **响应式布局：**自动适应不同的屏幕尺寸。

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

1. 导入依赖项

import { ref } from 'vue';
import { MenuOutlined, BellOutlined, SearchOutlined, StarOutlined, InfoCircleOutlined, HomeOutlined, CreditCardOutlined, ShoppingCartOutlined, UserOutlined } from '@ant-design/icons-vue';

2. 定义卡片数据

const listData = ref([
  {
    id: 1,
    title: 'CVS Pharmacy',
    address: 'Bridge Street, Brooklyn, NY',
    image: 'https://source.unsplash.com/random/100x100',
  },
  {
    id: 2,
    title: 'CVS Pharmacy',
    address: 'Bridge Street, Brooklyn, NY',
    image: 'https://source.unsplash.com/random/100x100',
  },
]);

3. 渲染卡片

<a-list
  :dataSource="listData"
  renderItem="renderItem"
>
  <template #renderItem="{ item }">
    <a-card>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <img :src="item.image" alt="item" class="w-16 h-16 rounded-full" />
          <div class="ml-3">
            <div class="text-base font-semibold text-gray-900">{item.title}</div>
            <div class="text-sm text-gray-500">{item.address}</div>
          </div>
        </div>
        <div>
          <a-tag color="green" class="text-sm">Hot Offer</a>
        </div>
      </div>
      <div class="flex items-center justify-between mt-4">
        <div class="flex items-center">
          <a-icon :icon="StarOutlined" class="text-yellow-500" />
          <a-icon :icon="StarOutlined" class="text-yellow-500" />
          <a-icon :icon="StarOutlined" class="text-yellow-500" />
          <a-icon :icon="StarOutlined" class="text-yellow-500" />
          <a-icon :icon="StarOutlined" class="text-yellow-500" />
          <span class="ml-1 text-sm text-gray-500">(485 reviews)</span>
        </div>
        <div>
          <a-icon :icon="InfoCircleOutlined" class="text-gray-500" />
        </div>
      </div>
    </a-card>
  </template>
</a-list>

关键代码分析：

• a-card 组件用于创建卡片容器。
• renderItem 插槽用于渲染每个卡片。
• a-tag 组件用于添加标签。
• a-icon 组件用于添加图标。

总结与展望

开发经验与收获：

• 学习了如何使用 Vue 3 和 Ant Design 构建交互式卡片组件。
• 掌握了使用插槽和模板来定制组件外观和行为。
• 提高了对响应式布局和数据绑定的理解。

未来拓展与优化：

• 添加更多自定义选项，如自定义卡片样式和内容。
• 整合地图功能，在地图上显示卡片的位置。
• 优化卡片的性能和可访问性。