一个Vue.js组件，用于选择一天中的时间间隔。内置SVG和指针事件。

安装和下载：

# NPM
$ npm install vue-time-ranges-picker --save

使用：

<template>
  <div>
    <div class="time-picker-wrapper">
      <VueTimeRangesPicker
        :value="ranges"
        @change="handleRangesChange"
      />
    </div>
  </div>
</template>

<script>
import VueTimeRangesPicker from 'vue-time-ranges-picker';

export default {
  components: {
    VueTimeRangesPicker
  },

  data() {
    return {
      ranges: [
        {
          startTime: '00:00',
          endTime: '03:00',
          scaleColor: 'violet',
        },
        {
          startTime: '03:00',
          endTime: '06:00',
          scaleColor: 'yellow',
        },
        {
          startTime: '06:00',
          endTime: '00:00',
          scaleColor: 'aquamarine',
        }
      ]
    }
  }
}
</script>

<style>
.time-picker-wrapper {
  width: 300px;
}
</style>

Props

value :arrayOf(object)

包含默认时间间隔和每个刻度颜色的数组。

isTwelfthMode :boolean, 默认值: false

如果要使用第十二格式的选取器，请将此值设置为true。如果为真，则数据也应为第十二种格式。

stepOfMoving :number, 默认值 : 0.5

此参数控制移动的最小小时数步长。

extraPointerRadius :number, 默认值 : 70

用户不能总是直接到达指针开始移动。该参数用于指示指针的其他不可见半径，当其被击中时，它将开始移动。

viewOptions :object, 默认值 :

{
  isShowChosenTime: true,
  isShowQuartersText: true,
  isShowHoursMarks: true,
  chosenTimeColor: 'grey',
  pointerColor: 'white',
  activePointerColor: 'rgba(240, 240, 240, 0.9)',
  pointerRadius: 6,
  activePointerRadius: 5.5,
  circleStrokeWidth: 8,
  hoursMarksColor: 'grey',
  quarterTextColor: 'grey',
}