vue.js 控件拖拽_Vue.js的旋钮控件-CSDN博客

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>

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>

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>

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>

翻译自: https://vuejsexamples.com/a-rotary-knob-control-for-vue-js/

vue.js 控件拖拽