使用Vue3构建自定义方块选择时间控件

本文演示如何利用Vue3构建一个如上图所示的交互式时间选择控件。该控件允许用户通过点击方块来选择特定时间段。

首先，我们创建一个Vue3组件，并使用响应式数据timelist来管理时间列表及其对应的方块选择状态。每个时间项包含时间字符串和一个可选的方块数组。

接下来，在模板中，我们遍历timelist，为每个时间项渲染相应的元素。每个时间项包含其时间字符串和一个方块列表。用户点击方块即可切换其选中状态。

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

立即学习“前端免费学习笔记（深入）”；

<template>
  <div class="time-box">
    <div v-for="item in timelist" :key="item.time">
      <div>
        <div>{{ item.time }}</div>
        <div v-for="val in item.sselect" :key="val.name"
             :style="{ backgroundColor: val.isselected ? 'red' : 'aqua' }"
             @click="select(item.time, val.name)">
          {{ val.name }}
        </div>
      </div>
    </div>
  </div>
</template>

最后，我们实现select方法来处理方块的选中状态。该方法会先重置所有方块的选中状态，确保同一时间段内只有一个方块被选中。

function select(time, name) {
  // 重置所有方块状态
  timeList.forEach(item => {
    item.sselect.forEach(val => val.isselected = false);
  });
  // 更新选中状态
  timeList.forEach(item => {
    if (item.time === time) {
      item.sselect.forEach(val => {
        if (val.name === name) val.isselected = !val.isselected;
      });
    }
  });
}

通过以上步骤，我们成功构建了一个功能完善的Vue3方块选择时间控件，满足了用户交互的需求。 代码中需要注意的是，timeList的数据结构需要预先定义好，包含时间和对应的方块信息。 此外，样式可以根据实际需求进行调整。