简介

一个用于圆形滑块的 Vue 组件

A Vue component for a circular slider

示例

👉 点我查看示例

使用

安装

npm i @luguicheng/vue-circle-slider

注册组件

import vueCircleSlider from '@luguicheng/vue-circle-slider'
Vue.use(vueCircleSlider)

<template>
  <div id="App">
    <vue-circle-slider
      :max="max"
      :step-minutes="stepMinutes"
      @input="onChange"
    ></vue-circle-slider>
  </div>
</template>

<script>
  export default {
    name: 'circle-slider',
    data() {
      return {
        initialValue: '22:00-02:00', // '22:30-06:30',  [23, 8]
        stepMinutes: 5 // 间隔的分钟数
      }
    },
    computed: {
      max() {
        // 一天总分钟数
        const totalMinutes = 24 * 60
        let value = totalMinutes / this.stepMinutes
        return value
      }
    },
    methods: {
      onChange(val) {
        console.log('value', val)
      }
    }
  }
</script>

配置

属性	类型	默认值	描述
value	Array,String	22:00-02:00	默认值
stepMinutes	Number	30	每一步的分钟数
side	Number	100	svg 正方形边的大小（以 px 为单位）
min	Number	0	最小值
max	Number	100	最大值
stepSize	Number	1	值之间的差距
circleColor	String	#334860	最外层圆的颜色
progressColor	String	#00be7e	进度曲线的颜色
knobColorStart	String	#00be7e	开始旋钮的颜色
knobColor	String	#00be7e	结束旋钮颜色
knobRadius	Number	null	精确的旋钮半径（以 px 为单位）
knobRadiusRel	Number	7	相对旋钮半径。 以 px 为单位的半径值将计算为 (side/2) /knobRadiusRel
circleWidth	Number	null	圆的精确宽度（以 px 为单位）
circleWidthRel	Number	20	相对圆的宽度。 以 px 为单位的宽度值将计算为 (side/2) / circleWidthRel
progressWidth	Number	null	精确的进度曲线宽度（以 px 为单位）
progressWidthRel	Number	10	相对进度曲线宽度。 以 px 为单位的宽度值将计算为 (side/2) / progressWidthRel

事件

名称	描述
value	值改变时会触发 value 事件