Vue.js最小的旋钮组件 – vue-knob-control
Vue.js应用程序的最小旋钮控件。
安装和下载：
# NPM
$ npm install vue-knob-control --save用法
import Vue from 'vue'
import KnobControl from 'vue-knob-control'
Vue.use(KnobControl)例子
最基本的用法：
<knob-control v-model="someValue"></knob-control>在指定最小值和最大值时，请注意，值弧是从计算出的零点开始绘制的。我们还使弧线看起来更细：
<knob-control
:min="-12"
:max="12"
:stroke-width="8"
v-model="semitone"
></knob-control>Properties
唯一需要的属性是value。
| 选项 | 类型 | 描述 | 默认 |
|---|---|---|---|
| value | Number | 使用该v-model属性设置控件的值 | none |
| max | Number | 控制最大值 | 100 |
| min | Number | 控制最小值 | 0 |
| stepSize | Number | 最小增量值可以改变 | 1个 |
| disabled | Boolean | 设置为true以禁用旋钮 | false |
| size | Number | 控件的可视大小px（%如果responsive为，则为true） | 100 |
| primaryColor | String | 值弧的颜色 | ＃409eff |
| secondaryColor | String | 其余控件的颜色 | ＃dcdfe6 |
| textColor | String | 值文字的颜色 | ＃000000 |
| strokeWidth | Number | 圆弧的厚度 | 17 |
| valueDisplayFunction | Function | 自定义功能更改显示文字 | (v) => v |
| responsive | Boolean | 使用%代替px | false |
| animation | Object | 可选的动画配置对象： { animated: false, animateValue: false, animationDuration: 2000 (in ms), animationFunction: 'ease-in-out' } | null |
