如何用Vue3实现带方块选择的时间控件？-js教程-PHP中文网

如何用Vue3实现带方块选择的时间控件？

碧海醫心

发布： 2025-02-24 14:32:10

原创

497人浏览过

如何用vue3实现带方块选择的时间控件？

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

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

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

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

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

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

<code class="vue"><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></code>

登录后复制

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

<code class="javascript">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;
      });
    }
  });
}</code>

登录后复制

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

以上就是如何用Vue3实现带方块选择的时间控件？的详细内容，更多请关注php中文网其它相关文章！