Vue.js 响应式图书网格布局

应用场景

此代码用于在电子商务网站或在线图书馆等应用程序中创建响应式的图书网格布局。它允许用户浏览图书列表，查看图书详细信息，并在不同设备上获得一致的体验。

基本功能

此代码使用 Vue.js 构建，并具有以下基本功能：

动态加载图书数据，实现响应式布局。
使用 v-for 指令在网格中渲染图书卡片。
当用户悬停在图书卡片上时，显示图书的详细信息。
响应式设计，可在各种设备上流畅显示。

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

1. 加载图书数据

const data = ref({
  books: [
    // ...图书数据
  ]
})

使用 Vue.js 的 ref 钩子创建了一个响应式 data 对象，其中包含图书数据。

2. 创建图书卡片模板

<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="book.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">{{ book.title }}</h3>
        <p class="mt-1 text-sm text-gray-500">{{ book.author }}</p>
      </div>
      <p class="text-sm font-medium text-gray-900">{{ book.price }}</p>
    </div>
  </div>
</template>

使用 Vue.js 的模板语法创建了图书卡片的 HTML 结构。v-for 指令用于循环渲染 data.books 数组中的图书数据。

3. 使用 CSS 布局网格

.grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8
}

使用 CSS 网格布局创建了响应式的图书网格。网格根据设备的宽度自动调整列数和间距。

4. 响应式布局

@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

使用 CSS 媒体查询实现响应式布局。当设备宽度达到特定阈值时，网格布局会自动调整。