0.1.2 • Published 3 years ago

@luguicheng/vue-circle-slider v0.1.2

Weekly downloads
-
License
-
Repository
-
Last release
3 years ago

简介

一个用于圆形滑块的 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>

配置

属性类型默认值描述
valueArray,String22:00-02:00默认值
stepMinutesNumber30每一步的分钟数
sideNumber100svg 正方形边的大小(以 px 为单位)
minNumber0最小值
maxNumber100最大值
stepSizeNumber1值之间的差距
circleColorString#334860最外层圆的颜色
progressColorString#00be7e进度曲线的颜色
knobColorStartString#00be7e开始旋钮的颜色
knobColorString#00be7e结束旋钮颜色
knobRadiusNumbernull精确的旋钮半径(以 px 为单位)
knobRadiusRelNumber7相对旋钮半径。 以 px 为单位的半径值将计算为 (side/2) /knobRadiusRel
circleWidthNumbernull圆的精确宽度(以 px 为单位)
circleWidthRelNumber20相对圆的宽度。 以 px 为单位的宽度值将计算为 (side/2) / circleWidthRel
progressWidthNumbernull精确的进度曲线宽度(以 px 为单位)
progressWidthRelNumber10相对进度曲线宽度。 以 px 为单位的宽度值将计算为 (side/2) / progressWidthRel

事件

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