js怎么实现这种时间控件?-灵析社区

Vue3手写了一个, 目前是互斥的: {{ item.time }} {{ val.name }} import { reactive } from 'vue'; const timeList = reactive([ { time: '08:00', sselect: [ { name: '上', isSelected: false }, { name: '下', isSelected: false }, ], }, { time: '09:00', sselect: [ { name: '上', isSelected: false }, { name: '下', isSelected: false }, ], }, { time: '10:00', sselect: [ { name: '上', isSelected: false }, { name: '下', isSelected: false }, ], }, { time: '11:00', sselect: [ { name: '上', isSelected: false }, { name: '下', isSelected: false }, ], }, ]); function select(time: string, name: string) { // 重置状态, 互斥用 timeList.forEach(element => { element.sselect.forEach(val => { val.isSelected = false }); }); timeList.forEach(element => { if (element.time === time) { element.sselect.forEach(val => { if (val.name === name) val.isSelected = !val.isSelected; }); } }); } .time-box { text-align: center; display: flex; & > div { margin-right: 10px; } .item-sele { width: 50px; height: 50px; background-color: aqua; margin-top: 10px; line-height: 50px; cursor: pointer; } }