使用vue2封装一个timepicker组件要求有isrange属性

以下是一个使用Vue 2封装的timepicker组件示例，其中包含了isrange属性：

<template>
  <div class="timepicker">
    <input type="text" v-model="selectedTime" @focus="showPicker" readonly>
    <div v-if="isPickerVisible" class="picker">
      <ul>
        <li v-for="time in times" :key="time" @click="selectTime(time)">
          {{ time }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TimePicker',
  props: {
    isrange: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectedTime: '',
      isPickerVisible: false,
      times: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00']
    };
  },
  methods: {
    showPicker() {
      this.isPickerVisible = true;
    },
    selectTime(time) {
      if (this.isrange) {
        if (!this.selectedTime) {
          this.selectedTime = time;
        } else {
          this.selectedTime += ' - ' + time;
          this.isPickerVisible = false;
        }
      } else {
        this.selectedTime = time;
        this.isPickerVisible = false;
      }
    }
  }
};
</script>

<style scoped>
.timepicker {
  position: relative;
  display: inline-block;
}

.picker {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  cursor: pointer;
  padding: 5px;
}

li:hover {
  background-color: #f5f5f5;
}
</style>

使用时，可以像下面这样在父组件中引入和使用该组件：

<template>
  <div>
    <h1>TimePicker</h1>
    <TimePicker :isrange="true"></TimePicker>
  </div>
</template>

<script>
import TimePicker from './TimePicker.vue';

export default {
  components: {
    TimePicker
  }
};
</script>

在上面的示例中，我们通过props属性isrange来控制是否启用范围选择。当isrange为true时，用户可以选择起始时间和结束时间，时间之间用" - "分隔，并且选择框会在选择结束时间后自动关闭。当isrange为false时，用户只能选择单个时间