如何在JavaScript中实现带时间块选择功能的控件？-js教程-PHP中文网

如何在JavaScript中实现带时间块选择功能的控件？

花韻仙語

发布： 2025-02-24 11:20:19

原创

475人浏览过

如何在javascript中实现带时间块选择功能的控件？

本文介绍如何在JavaScript中构建一个带有时间块选择功能的控件。以下示例使用Vue 3框架实现，展示如何创建一个可交互的时间块选择器。

Vue 3 实现：

ViiTor实时翻译

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

116

查看详情

<code class="vue"><template>
  <div class="time-selector">
    <div v-for="(timeBlock, index) in timeBlocks" :key="index">
      <div class="time">{{ timeBlock.time }}</div>
      <div v-for="(slot, slotIndex) in timeBlock.slots" :key="slotIndex" 
           class="slot" 
           :class="{ selected: slot.selected }"
           @click="selectSlot(timeBlock.time, slot.name)">
        {{ slot.name }}
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  setup() {
    const timeBlocks = reactive([
      { time: '08:00', slots: [{ name: '上', selected: false }, { name: '下', selected: false }] },
      { time: '09:00', slots: [{ name: '上', selected: false }, { name: '下', selected: false }] },
      { time: '10:00', slots: [{ name: '上', selected: false }, { name: '下', selected: false }] },
      { time: '11:00', slots: [{ name: '上', selected: false }, { name: '下', selected: false }] },
    ]);

    const selectSlot = (time, slotName) => {
      // 确保同一时间段只有一个槽位被选中
      timeBlocks.forEach(block => {
        if (block.time === time) {
          block.slots.forEach(slot => {
            slot.selected = slot.name === slotName;
          });
        }
      });
    };

    return { timeBlocks, selectSlot };
  },
};
</script>

<style scoped>
.time-selector {
  display: flex;
  flex-wrap: wrap;
}

.time-selector > div {
  margin: 5px;
  border: 1px solid #ccc;
  padding: 5px;
  text-align: center;
}

.time {
  font-weight: bold;
}

.slot {
  cursor: pointer;
  padding: 5px;
  margin: 2px;
  background-color: #eee;
}

.slot.selected {
  background-color: lightgreen;
}
</style></code>

登录后复制

这段代码创建了一个包含多个时间块的组件，每个时间块有两个可选择的时段（“上”和“下”）。点击一个时段会将其选中，同时取消同一时间块中其他时段的选择。样式使用了简单的CSS来增强可视化效果。您可以根据需要调整时间块和时段的数量以及样式。记住，这只是一个基本的例子，您可以根据实际需求添加更多功能，例如日期选择、数据绑定等等。

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