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

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

一个简单的普通Vue.js组件,用于创建一个旋钮,使用户可以通过拖动表盘来调整值。

安装和下载:

# NPM
$ npm i @websanova/vue-knob --save

主要特征:

  • 自动标签布局和位置
  • 选项的键/值配对
  • 标签的HTML注入
  • 旋钮单击并拖动
  • 现实的单向旋转
  • 贴标签
  • 自定义天使位置
  • 不需要画布和SVG。

基本用法:

1.导入并注册组件。

import Vue from 'vue';
import VueKnob from '@websanova/vue-knob';
Vue.component('el-knob', VueKnob);

2.在应用程序中创建一个基本的旋钮组件。

<el-knob
  v-model="data.value"
  :options="data.options"
/>

3.默认组件道具。

value: {
  default: null
},
variant: {
  default: ''
},
size: {
  default: ''
},
options: {
  default() {
    return [];
  }
},
valueKey: {
  default: 'value'
},
labelKey: {
  default: 'label'
},
startAngle: {
  type: Number,
  default: 30
},
endAngle: {
  type: Number,
  default: 330
},
anchorOffset: {
  type: Number,
  default: 0
},
indexSkip: {
  type: Number,
  default: null
},
minSpeed: {
  type: Number,
  default: 0.2
}

变更日志:

v0.4.2(01/07/2021)

  • 修复点击事件以在标签上触发