基于 Vue.js 的表格卡片开发

应用场景

表格卡片是一种常见的 UI 组件，用于展示数据并允许用户快速浏览和筛选信息。它们广泛应用于电子商务、内容管理系统和数据分析等场景中。

代码基本功能

本代码段实现了一个基于 Vue.js 的表格卡片，其主要功能包括：

• 展示产品信息，包括名称、价格、评分、销量和图片
• 响应式布局，可在不同设备尺寸下自适应显示
• 悬停时显示产品详细信息

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

1. 定义数据源

const products = ref([
  // ...产品数据
])

2. 创建表格卡片

<template>
  <div class="bg-gray-100">
    <div class="max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
      <h2 class="text-2xl font-extrabold tracking-tight text-gray-900">
        Tables
      </h2>

      <div class="mt-6 grid grid-cols-1 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 lg:gap-x-6">
        <!-- 产品卡片 -->
      </div>
    </div>
  </div>
</template>

3. 循环渲染产品卡片

<template>
  <!-- ... -->

  <div class="grid grid-cols-1 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 lg:gap-x-6">
    <div v-for="product in products" :key="product.id" class="group relative">
      <!-- 产品卡片内容 -->
    </div>
  </div>

  <!-- ... -->
</template>

4. 定义产品卡片内容

<template>
  <!-- ... -->

  <div class="group relative">
    <div class="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
      <img :src="product.image" alt="" class="w-full h-full object-center object-cover lg:w-full lg:h-full" />
    </div>
    <div class="mt-4 flex justify-between">
      <div>
        <h3 class="text-sm text-gray-700">
          <a href="#">
            <span aria-hidden="true" class="absolute inset-0"></span>
            {{ product.name }}
          </a>
        </h3>
        <p class="mt-1 text-sm text-gray-500">{{ product.rating }} | {{ product.sales }} sold</p>
      </div>
      <p class="text-sm font-medium text-gray-900">{{ product.price }}</p>
    </div>
  </div>

  <!-- ... -->
</template>

5. 添加悬停效果

<template>
  <!-- ... -->

  <div class="group relative">
    <!-- ... -->
    <div class="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
      <!-- ... -->
    </div>
    <!-- ... -->
  </div>

  <!-- ... -->
</template>

.group-hover\:opacity-75 {
  --tw-group-hover-opacity: 0.75;
  opacity: var(--tw-group-hover-opacity);
  transition-property: opacity, transform, --tw-transform-opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 15ms;
}

总结与展望

开发经验与收获：

• 熟练运用 Vue.js 框架进行组件开发
• 掌握响应式布局和悬停效果的实现技巧
• 提高了代码的可读性和可维护性

未来拓展与优化：

• 添加排序和筛选功能，提升用户体验
• 整合分页功能，处理大量数据展示
• 探索 CSS Grid 布局，优化卡片排列方式