基于Vue3构建自定义时间段选择器

本文演示如何使用Vue3构建一个自定义的时间段选择控件，实现点击选择上午或下午特定时间的功能。 我们将利用Vue3的响应式系统和组件化特性来完成此任务。

首先，创建一个响应式数据数组timeList，存储每个时间段及其对应的上午/下午选择状态：

const timeList = reactive([
  {
    time: '08:00',
    options: [
      { name: '上午', selected: false },
      { name: '下午', selected: false },
    ],
  },
  // ... 添加更多时间段
]);

接下来，定义一个selectTime函数处理点击事件，更新选择状态：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

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

function selectTime(time, option) {
  // 清除所有已选状态
  timeList.forEach(item => item.options.forEach(opt => opt.selected = false));

  // 更新选中状态
  timeList.forEach(item => {
    if (item.time === time) {
      item.options.forEach(opt => {
        if (opt.name === option) opt.selected = !opt.selected;
      });
    }
  });
}

最后，在模板中使用v-for指令遍历timeList，并绑定点击事件：

<div class="time-selector">
  <div v-for="item in timeList" :key="item.time">
    <div>{{ item.time }}</div>
    <div v-for="option in item.options" :key="option.name"
         @click="selectTime(item.time, option.name)"
         :class="{ selected: option.selected }">
      {{ option.name }}
    </div>
  </div>
</div>

通过以上步骤，一个可点击选择上午/下午时间段的自定义控件即可完成。 记得添加样式来美化界面。 此示例代码简洁易懂，方便理解和扩展。