基于 Vue 的健身训练管理卡片

应用场景

健身训练管理卡片是一个交互式的 Vue 组件，允许用户跟踪和管理他们的健身训练计划。它提供了以下功能：

• 展示训练计划中的练习和组数
• 标记已完成的练习
• 开始或结束训练

基本功能

健身训练管理卡片的基本功能包括：

• **展示训练计划：**它以列表的形式展示训练计划中的练习和组数。
• **标记已完成的练习：**用户可以通过点击练习名称旁边的复选标记来标记已完成的练习。
• **开始或结束训练：**用户可以通过点击“开始训练”或“结束训练”按钮来开始或结束训练。

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

1. 初始化数据

const workoutList = ref([
  {
    name: 'Squats',
    sets: 3,
    finished: false,
  },
  // ...其他练习
]);

此代码片段初始化了一个名为 workoutList 的响应式数组，其中包含训练计划中练习和组数的数据。

2. 展示训练计划

<van-list v-model="workoutList" :finished="finished" :immediate="true">
  <template #default="{ item }">
    <van-cell
      :title="item.name"
      :label="item.sets + ' sets'"
      :right-icon="item.finished ? 'success' : 'arrow'"
      @click="toggleItem(item)"
    />
  </template>
</van-list>

此代码片段使用 Vuetify 的 van-list 组件来展示训练计划。v-model 指令绑定到 workoutList 响应式数组，从而使组件能够响应数组的变化。finished 属性用于确定练习是否已完成。immediate 属性确保在组件挂载时立即更新列表。

3. 标记已完成的练习

const toggleItem = (item) => {
  item.finished = !item.finished;
};

此代码片段定义了一个 toggleItem 函数，用于标记已完成的练习。当用户点击练习名称旁边的复选标记时，此函数会被调用。它将 finished 属性的值取反，从而切换练习的完成状态。

4. 开始或结束训练

const startWorkout = () => {
  finished.value = true;
};

此代码片段定义了一个 startWorkout 函数，用于开始训练。当用户点击“开始训练”按钮时，此函数会被调用。它将 finished 响应式变量的值设置为 true，从而标记训练已开始。

总结与展望

开发这段代码的过程让我学到了 Vue 的响应式性和数据绑定的强大功能。它还让我熟悉了 Vuetify 组件库的使用。

未来，此健身训练管理卡片可以进一步扩展和优化，以包括以下功能：

• **计时器：**跟踪训练中练习的持续时间。
• **休息提醒：**在练习之间提供休息提醒。
• **进度跟踪：**记录用户的训练进度并提供反馈。