vue3封装时间选择器

Vue 3 中封装时间选择器可以使用组件的方式进行实现。下面是一个简单的示例代码，演示了如何封装一个基本的时间选择器组件：

<template>
  <div class="time-picker">
    <select v-model="hours">
      <option v-for="hour in 24" :value="hour" :key="hour">{{ hour }}</option>
    </select>
    <select v-model="minutes">
      <option v-for="minute in 60" :value="minute" :key="minute">{{ minute }}</option>
    </select>
    <select v-model="amPm">
      <option value="AM">AM</option>
      <option value="PM">PM</option>
    </select>
  </div>
</template>

<script>
export default {
  name: 'TimePicker',
  data() {
    return {
      hours: 0,
      minutes: 0,
      amPm: 'AM'
    };
  },
  computed: {
    formattedTime() {
      const hour = this.hours % 12 || 12;
      const minute = this.minutes.toString().padStart(2, '0');
      return `${hour}:${minute} ${this.amPm}`;
    }
  }
};
</script>

<style scoped>
.time-picker {
  display: flex;
}
</style>

在这个示例中，我们使用了三个 select 元素来分别选择小时、分钟和上午/下午。通过 v-model 指令，我们将这些 select 元素与组件的 data 属性进行了双向绑定。

computed 属性 formattedTime 根据选择的小时、分钟和上午/下午来计算出最终的格式化时间。

你可以根据实际需求进行样式和功能的扩展，例如添加时间范围限制、增加自定义的选项等。希望这个示例可以帮助到你！