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

以下是一个基于Element UI源码的Vue2 TimePicker组件封装示例，根据要求添加了isrange属性实现时间范围选择功能：

<template>
  <div class="time-picker">
    <el-input :value="formatTime(value1)" @click="openPicker1" readonly></el-input>
    <el-input :value="formatTime(value2)" v-if="isrange" @click="openPicker2" readonly></el-input>
    <el-time-picker
      ref="picker1"
      :picker-options="pickerOptions"
      v-model="value1"
      :visible="pickerVisible1"
      @change="handleChange1"
      @blur="handleBlur1"
      @focus="handleFocus1"
    ></el-time-picker>
    <el-time-picker
      ref="picker2"
      :picker-options="pickerOptions"
      v-if="isrange"
      v-model="value2"
      :visible="pickerVisible2"
      @change="handleChange2"
      @blur="handleBlur2"
      @focus="handleFocus2"
    ></el-time-picker>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Array],
      default: ''
    },
    isrange: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      pickerVisible1: false,
      pickerVisible2: false,
      value1: '',
      value2: '',
      pickerOptions: {
        start: '00:00',
        step: '00:30',
        end: '23:30'
      }
    };
  },
  watch: {
    value: {
      handler(val) {
        if (Array.isArray(val)) {
          this.value1 = val[0];
          this.value2 = val[1];
        } else {
          this.value1 = val;
        }
      },
      immediate: true
    },
    value1(val) {
      if (this.isrange) {
        this.$emit('input', [val, this.value2]);
      } else {
        this.$emit('input', val);
      }
    },
    value2(val) {
      this.$emit('input', [this.value1, val]);
    }
  },
  methods: {
    formatTime(time) {
      return time ? time.replace(/:[0-9]{2}$/, '') : '';
    },
    openPicker1() {
      this.pickerVisible1 = true;
    },
    openPicker2() {
      this.pickerVisible2 = true;
    },
    handleChange1(time) {
      if (this.isrange && time) {
        // 切换到第二个选择器
        this.$refs.picker2.$refs.input.focus();
      } else {
        this.pickerVisible1 = false;
      }
    },
    handleChange2() {
      this.pickerVisible2 = false;
    },
    handleBlur1() {
      this.pickerVisible1 = false;
    },
    handleBlur2() {
      this.pickerVisible2 = false;
    },
    handleFocus1() {
      this.pickerVisible1 = true;
    },
    handleFocus2() {
      this.pickerVisible2 = true;
    }
  }
};
</script>

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

使用示例：

<template>
  <div>
    <time-picker v-model="time" :isrange="true"></time-picker>
  </div>
</template>

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

export default {
  components: {
    TimePicker
  },
  data() {
    return {
      time: ['12:00', '18:00']
    };
  }
};
</script>

以上代码封装了一个TimePicker组件，通过v-model绑定时间值，使用isrange属性控制是否显示第二个时间选择器，实现了时间范围选择功能，并且保留了原生的Element UI样式