vue可自定义的圆形范围滑块组件 - vue-round-slider

vue可自定义的圆形范围滑块组件 - vue-round-slider
插件名称 vue-round-slider
发布时间 2020年12月25日
插件作者 soundar24

Round Slider是Vue.js组件,用于在应用程序上创建高度可定制的圆形范围滑块或旋钮控件。

更多功能:

  • 还支持圆形,半圆/半圆和四分之一圆形状。
  • 自定义数字格式。
  • 触摸友好。
  • 也支持鼠标滚轮和键盘。
  • CSS3动画。

安装和下载:

# Yarn
$ yarn add vue-round-slider

# NPM
$ npm i vue-round-slider

基本用法:

1.导入“圆形滑块”组件。

import Vue from 'vue'
import RoundSlider from 'vue-round-slider'

2.注册组件。

new Vue({
    el: '#app',
    components: {
      RoundSlider,
      // ...
    }
})

3.将带有默认 props 的圆形滑块组件添加到应用程序模板。

<round-slider />
new Vue({
    el: '#app',
    components: {
      RoundSlider,
    },
    data() {
      return {
        sliderValue: 50
      }
    },
})

4.可用的 props 来定制圆形滑块。

min: {
  type: [String, Number],
  default: 0
},
max: {
  type: [String, Number],
  default: 100
},
step: {
  type: [String, Number],
  default: 1
},
value: {
  type: [String, Number],
  default: null
},
radius: {
  type: [String, Number],
  default: 105
},
width: {
  type: [String, Number],
  default: 20
},
lineCap: {
  type: String,
  default: "butt",
  validator(cap) {
    return validateProp('lineCap', cap);
  },
},
startAngle: {
  type: [String, Number],
  default: 0
},
endAngle: {
  type: [String, Number],
  default: "+360"
},

// UI appearance related props
borderWidth: {
  type: [String, Number],
  default: 0
},
borderColor: {
  type: String,
  default: "inherit"
},
pathColor: {
  type: String,
  default: "#EEE"
},
rangeColor: {
  type: String,
  default: "#69F"
},
tooltipColor: {
  type: String,
  default: "inherit"
},

// Behaviour related props
sliderType: {
  type: String,
  default: "min-range", // or 'range'
  validator(type) {
    return validateProp('sliderType', type);
  },
},
circleShape: {
  type: String,
  default: "full",
  validator(shape) {
    return validateProp('circleShape', shape);
  },
},
animation: {
  type: [String, Boolean],
  default: true
},
readOnly: {
  type: [String, Boolean],
  default: false
},
disabled: {
  type: [String, Boolean],
  default: false
},

// Miscellaneous
handleSize: {
  type: [String, Number],
  default: "+0"
},
handleShape: {
  type: String,
  default: "round",
  validator(shape) {
    return validateProp('handleShape', shape);
  },
},
showTooltip: {
  type: [String, Boolean],
  default: true
},
editableTooltip: {
  type: [String, Boolean],
  default: true
},
keyboardAction: {
  type: [String, Boolean],
  default: true
},
mouseScrollAction: {
  type: [String, Boolean],
  default: false
},
// Usecase related props
startValue: {
  type: [String, Number],
  default: null
},
// Events
create: {
  type: Function,
  default: null,
},
beforeValueChange: {
  type: Function,
  default: null,
},
change: {
  type: Function,
  default: null,
},
update: {
  type: Function,
  default: null,
},
valueChange: {
  type: Function,
  default: null,
},
tooltipFormat: {
  type: Function,
  default: null,
}