根据element ui源码使用vue2封装一个timepicker组件要求有isrange属性

以下是根据Element UI源码使用Vue2封装的TimePicker组件，具备isRange属性：

<template>
  <div class="time-picker">
    <div class="time-picker-input">
      <input type="text" v-model="startTime" @focus="showStartTimePicker" readonly>
      <span class="separator">-</span>
      <input type="text" v-model="endTime" @focus="showEndTimePicker" readonly>
    </div>
    <div class="time-picker-panel" v-show="showPanel">
      <ul class="time-picker-list">
        <li v-for="time in timeOptions" :key="time" @click="selectTime(time)">
          {{ time }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPanel: false,
      startTime: '',
      endTime: '',
      timeOptions: [
        '00:00',
        '01:00',
        '02:00',
        '03:00',
        '04:00',
        '05:00',
        '06:00',
        '07:00',
        '08:00',
        '09:00',
        '10:00',
        '11:00',
        '12:00',
        '13:00',
        '14:00',
        '15:00',
        '16:00',
        '17:00',
        '18:00',
        '19:00',
        '20:00',
        '21:00',
        '22:00',
        '23:00',
      ],
    };
  },
  methods: {
    showStartTimePicker() {
      this.showPanel = true;
      this.$nextTick(() => {
        const input = this.$el.querySelector('.time-picker-input input:first-child');
        input.focus();
      });
    },
    showEndTimePicker() {
      this.showPanel = true;
      this.$nextTick(() => {
        const input = this.$el.querySelector('.time-picker-input input:last-child');
        input.focus();
      });
    },
    selectTime(time) {
      if (this.startTime === '' && this.endTime === '') {
        this.startTime = time;
      } else if (this.startTime !== '' && this.endTime === '') {
        if (time < this.startTime) {
          this.endTime = this.startTime;
          this.startTime = time;
        } else {
          this.endTime = time;
        }
      } else {
        this.startTime = time;
        this.endTime = '';
      }
      this.showPanel = false;
    }
  },
};
</script>

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

.time-picker-input {
  display: flex;
  align-items: center;
  justify-content: center;
}

.separator {
  margin: 0 5px;
}

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

.time-picker-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.time-picker-list li {
  padding: 5px 10px;
  cursor: pointer;
  user-select: none;
}

.time-picker-list li:hover {
  background-color: #f5f7fa;
}
</style>

在父组件中可以使用该TimePicker组件，并使用isRange属性来决定是否为时间范围选择器：

<template>
  <div>
    <time-picker v-if="isRange" />
    <time-picker v-else />
  </div>
</template>

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

export default {
  components: {
    TimePicker,
  },
  data() {
    return {
      isRange: true,
    };
  },
};
</script>

在上述示例中，TimePicker组件使用两个input元素实现时间选择输入框，点击输入框时显示时间选择面板。时间选择面板中的时间选项通过timeOptions数组动态生成，并通过selectTime方法选择时间。同时，根据选择的时间，通过v-model指令双向绑定到startTime和endTime变量上。isRange属性决定是否为时间范围选择器，根据该属性来选择渲染的TimePicker组件