基于 Vue 3 的冥想应用卡片组件

应用场景

本组件旨在为冥想应用提供一个直观且用户友好的界面，用户可以通过该界面访问各种冥想课程和资源。

基本功能

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

• 展示冥想课程列表，包括标题、持续时间和开始按钮。
• 搜索和过滤课程。
• 展示推荐冥想课程。
• 提供导航链接，允许用户访问其他页面，如课程列表和设置。

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

1. 初始化数据

首先，我们在 <script> 标签中初始化了两个响应式数据对象：meditationData 和 meditationBasicData。这些数据对象存储了冥想课程和推荐课程的数据。

const meditationData = ref([
  // ...
]);

const meditationBasicData = ref([
  // ...
]);

2. 创建课程列表

在 <template> 标签中，我们使用 v-for 指令来创建课程列表。每个课程都显示标题、持续时间和一个开始按钮。

<div class="flex flex-col space-y-4">
  <div v-for="course in meditationData" :key="course.id">
    <h2 class="text-lg font-medium text-gray-700">{{ course.title }}</h2>
    <div class="flex items-center">
      <span class="text-sm font-medium text-gray-500">{{ course.duration }}</span>
      <button
        class="ml-4 text-sm font-medium text-blue-600 hover:underline"
      >
        Start
      </button>
    </div>
  </div>
</div>

3. 添加搜索和过滤功能

我们在 <template> 标签中添加了搜索和过滤功能。用户可以在搜索框中输入文本，以过滤显示的课程。

<div class="flex items-center justify-between mb-4">
  <h1 class="text-xl font-bold text-gray-700">Meditation</h1>
  <div class="flex items-center">
    <input
      type="text"
      placeholder="Search"
      class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600"
    />
    <button
      class="ml-4 text-sm font-medium text-blue-600 hover:underline"
    >
      Filter
    </button>
  </div>
</div>

4. 展示推荐课程

我们在 <template> 标签中添加了一个部分来展示推荐课程。

<div class="mt-8">
  <h2 class="text-lg font-medium text-gray-700">Meditation</h2>
  <div class="flex items-center justify-between mt-4">
    <div class="flex items-center">
      <img
        src="https://source.unsplash.com/random/50x50"
        alt=""
        class="w-10 h-10 rounded-full"
      />
      <div class="ml-4">
        <h3 class="text-sm font-medium text-gray-700">{{ meditationBasicData[1].title }}</h3>
        <p class="text-sm font-normal text-gray-500">
          {{ meditationBasicData[1].description }}
        </p>
      </div>
    </div>
    <button class="text-sm font-medium text-blue-600 hover:underline">
      Start
    </button>
  </div>
</div>

5. 添加导航链接

我们在 <template> 标签中添加了导航链接，允许用户访问其他页面。

<div class="mt-8 flex items-center justify-between">
  <a href="#" class="text-sm font-medium text-blue-600 hover:underline"
    >Today</a
  >
  <a href="#" class="text-sm font-medium text-blue-600 hover:underline"
    >All Courses</a
  >
  <a href="#" class="text-sm font-medium text-blue-600 hover:underline"
    >Settings</a
  >
</div>

总结与展望

开发这个冥想应用卡片组件是一个有价值的经验。我们学习了如何使用 Vue 3 来创建交互式且用户友好的界面。

未来，我们计划扩展该组件的功能，包括：

• 添加进度条，以跟踪用户的冥想进度。
• 提供更多个性化课程推荐。
• 集成与其他健康和健身应用。