基于Vue3构建自定义时间段选择器
本文演示如何使用Vue3构建一个自定义的时间段选择控件，实现点击选择上午或下午特定时间的功能。 我们将利用Vue3的响应式系统和组件化特性来完成此任务。
首先，创建一个响应式数据数组timeList，存储每个时间段及其对应的上午/下午选择状态：
<code class="javascript">const timeList = reactive([
{
time: '08:00',
options: [
{ name: '上午', selected: false },
{ name: '下午', selected: false },
],
},
// ... 添加更多时间段
]);</code>
接下来，定义一个selectTime函数处理点击事件，更新选择状态：
立即学习“前端免费学习笔记（深入）”；
<code class="javascript">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;
});
}
});
}</code>
最后，在模板中使用v-for指令遍历timeList，并绑定点击事件：
<code class="vue"><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></code>
通过以上步骤，一个可点击选择上午/下午时间段的自定义控件即可完成。 记得添加样式来美化界面。 此示例代码简洁易懂，方便理解和扩展。
