Vue.js最小的旋钮组件 - vue-knob-control

Vue.js最小的旋钮组件 - vue-knob-control
插件名称 vue-knob-control
发布时间 2020年9月9日
插件作者 kramer99

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为,则为true100
primaryColorString值弧的颜色#409eff
secondaryColorString其余控件的颜色#dcdfe6
textColorString值文字的颜色#000000
strokeWidthNumber圆弧的厚度17
valueDisplayFunctionFunction自定义功能更改显示文字(v) => v
responsive Boolean使用%代替pxfalse
animation Object可选的动画配置对象: { animated: false, animateValue: false, animationDuration: 2000 (in ms), animationFunction: 'ease-in-out' }null