Viwe UI时间选择框

时间选择框是一个常用的UI控件，在不同的UI库中可能会有不同的实现方式，以下是一个基于Vue.js框架的时间选择框示例代码：

<template>
  <div class="time-picker">
    <input type="text" v-model="selectedTime" @focus="showPicker = true">
    <div v-if="showPicker" class="picker-container">
      <div class="picker-header">
        <span class="picker-title">选择时间</span>
        <button @click="showPicker = false">关闭</button>
      </div>
      <div class="picker-body">
        <div class="picker-column">
          <div class="picker-column-header">小时</div>
          <div class="picker-options">
            <div v-for="hour in hours" :class="{ active: selectedHour === hour }" @click="setHour(hour)">{{ hour }}</div>
          </div>
        </div>
        <div class="picker-column">
          <div class="picker-column-header">分钟</div>
          <div class="picker-options">
            <div v-for="minute in minutes" :class="{ active: selectedMinute === minute }" @click="setMinute(minute)">{{ minute }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPicker: false,
      selectedTime: '',
      selectedHour: null,
      selectedMinute: null,
      hours: Array.from({ length: 24 }, (_, i) => i),
      minutes: Array.from({ length: 60 }, (_, i) => i)
    }
  },
  methods: {
    setHour(hour) {
      this.selectedHour = hour
      this.updateSelectedTime()
    },
    setMinute(minute) {
      this.selectedMinute = minute
      this.updateSelectedTime()
    },
    updateSelectedTime() {
      if (this.selectedHour !== null && this.selectedMinute !== null) {
        this.selectedTime = `${this.selectedHour.toString().padStart(2, '0')}:${this.selectedMinute.toString().padStart(2, '0')}`
        this.showPicker = false
      }
    }
  }
}
</script>

在这个示例代码中，我们使用了一个input元素来显示选择的时间，并且在它获得焦点时弹出时间选择框。时间选择框包含了两个列，一个显示小时，一个显示分钟。我们使用了v-for指令来生成选项，并且使用了v-model指令来绑定选中的时间值。当选择完小时和分钟后，我们将它们拼接成一个字符串，并将它赋值给selectedTime，最后关闭时间选择框。