vue.js 控件拖拽
Vue旋钮控制 (vue-knob-control)
A rotary knob control for Vue.js
Vue.js的旋钮控件
安装 (Install)
npm install vue-knob-control -S
用法 (Usage)
import Vue from 'vue'
import VueKnobControl from 'vue-knob-control'
Vue.use(VueKnobControl)
例子 (Examples)
Most basic usage:
最基本的用法:
<knob-control v-model="someValue"></knob-control>
![one](https://user-images.githubusercontent.com/6402557/39788944-c86fd9f2-52e1-11e8-91f1-cb89cec6bf77.png)
Specifying minimum and maximum values, note that the value arc is drawn from the calculated zero point. We have also made the arc appear thinner:
在指定最小值和最大值时,请注意,值弧是从计算出的零点开始绘制的。 我们还使弧线看起来更细:
<knob-control
:min="-12"
:max="12"
:stroke-width="8"
v-model="semitone"
></knob-control>
![two](https://user-images.githubusercontent.com/6402557/39788946-c8b784d2-52e1-11e8-9922-841bb6331d48.png)
Changing size and colors:
更改大小和颜色:
<knob-control
:min="-64"
:max="63"
:size="75"
primary-color="#E844C3"
secondary-color="#E7B6DC"
text-color="#E844C3"
v-model="detune"
></knob-control>
![three](https://user-images.githubusercontent.com/6402557/39788945-c88ae45e-52e1-11e8-98ec-f73600cc505d.png)
You can also pass a function to alter the value text displayed:
您还可以传递一个函数来更改显示的值文本:
toWord: function(val) {
const map = {
0: 'zero',
1: 'one',
2: 'two',
3: 'three',
4: 'four',
}
return map[val];
}
<knob-control
:min="0"
:max="4"
:value-display-function="toWord"
v-model="val"
></knob-control>
![four](https://user-images.githubusercontent.com/6402557/39789354-331a636a-52e4-11e8-9464-6627b3e11add.png)
翻译自: https://vuejsexamples.com/a-rotary-knob-control-for-vue-js/
vue.js 控件拖拽