使用vue2封装一个timepicker组件

在Vue2中，可以使用Vue.component方法来封装一个timepicker组件。以下是一个简单的示例：

<template>
  <div class="timepicker">
    <input type="text" v-model="selectedTime" @focus="showPicker = true" />
    <div v-if="showPicker" class="picker">
      <div class="picker-item" v-for="hour in hours" :key="hour" @click="selectHour(hour)">
        {{ hour }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedTime: '',
      showPicker: false,
      hours: Array.from({ length: 24 }, (_, i) => ('0' + i).slice(-2))
    }
  },
  methods: {
    selectHour(hour) {
      this.selectedTime = hour;
      this.showPicker = false;
    }
  }
}
</script>

<style scoped>
.timepicker {
  position: relative;
}

.picker {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100px;
  background-color: #fff;
  border: 1px solid #ccc;
}

.picker-item {
  padding: 5px;
  cursor: pointer;
}

.input {
  width: 100px;
}
</style>

在上述示例中，我们使用一个input元素来展示选中的时间，并使用v-model指令绑定selectedTime属性。当input元素被点击时，我们通过设置showPicker为true来显示时间选择器。时间选择器使用一个div元素来展示可选的小时，通过v-for指令遍历hours数组生成选项。当小时被点击时，我们会更新selectedTime的值，并将showPicker设置为false来隐藏时间选择器。

这只是一个简单的示例，你可以根据自己的需求来扩展和定制这个timepicker组件