Vue.js 旅行代理列表卡片

应用场景

此 Vue.js 组件可用于在 Web 应用程序中创建旅行代理列表卡片，允许用户浏览和查看不同旅行社的信息。它适用于旅游预订平台、旅行博客或任何需要展示旅行相关信息的地方。

代码基本功能

该组件提供以下基本功能：

• **可滚动列表：**显示所有旅行社的列表，每个旅行社都有自己的卡片。
• **卡片信息：**每个卡片包含旅行社的名称、星级评级、描述和查看详情链接。
• **响应式布局：**组件根据可用屏幕空间调整其布局，在较小的屏幕上堆叠卡片，在较大的屏幕上并排显示卡片。

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

步骤 1：创建卡片组件

在 <template> 部分，创建了一个可重复使用的 <TravelAgencyCard> 组件，用于渲染每个旅行社的卡片。它包含以下元素：

<a href="#" class="block hover:bg-gray-50">
  <div class="px-4 py-4 sm:px-6">
    <div class="flex items-center justify-between">
      <p class="text-sm font-medium text-indigo-600 truncate">{{ travelAgency.name }}</p>
      <div class="ml-2 flex items-center">
        <svg class="h-5 w-5 text-gray-400" ...></svg>
        <span class="sr-only">{{ travelAgency.rating }} out of 5 stars</span>
      </div>
    </div>
    <p class="mt-1 text-sm text-gray-500">{{ travelAgency.description }}</p>
  </div>
</a>

• <a> 元素充当卡片的链接，将用户带到旅行社的详细信息页面。
• 卡片包含旅行社的名称、星级评级和描述。
• 使用 truncate 类来截断长名称。

步骤 2：创建列表组件

在 <template> 部分，创建了 <TravelAgencyList> 组件，用于渲染旅行社列表。它包含以下元素：

<div class="inline-block min-w-full overflow-hidden rounded-lg shadow">
  <div class="bg-white">
    <div class="px-4 py-5 sm:px-6">
      <h3 class="text-lg leading-6 font-medium text-gray-900">All</h3>
      <p class="mt-1 max-w-2xl text-sm text-gray-500">A list of all the travel agencies.</p>
    </div>
    <div class="border-t border-gray-200">
      <ul role="list" class="divide-y divide-gray-200">
        <li v-for="travelAgency in travelAgencies" :key="travelAgency.id">
          <TravelAgencyCard :travelAgency="travelAgency" />
        </li>
      </ul>
    </div>
  </div>
</div>

• <ul> 元素包含可重复使用的 <TravelAgencyCard> 组件的列表，每个组件代表一个旅行社。
• 使用 v-for 指令在 travelAgencies 数组中循环，并为每个旅行社渲染一个卡片。

步骤 3：在父组件中使用列表组件

在父组件中，将 <TravelAgencyList> 组件作为子组件使用。它传递 travelAgencies 数组作为道具，该数组包含旅行社对象。

<template>
  <div>
    <TravelAgencyList :travelAgencies="travelAgencies" />
  </div>
</template>

总结与展望

开发经验与收获：

• 了解了如何在 Vue.js 中创建可重复使用的组件。
• 练习了数据绑定和循环的用法。
• 掌握了响应式布局的实现。

未来拓展与优化：

• **过滤和搜索：**添加过滤和搜索功能，允许用户根据名称、评级或其他标准查找旅行社。
• **无限滚动：**当用户滚动到列表底部时，实现无限滚动以加载更多旅行社。
• **拖放排序：**允许用户拖放卡片以重新排列旅行社列表。