README
可拖拽的弧形进度条组件(支持移动端)
这是一个支持任意弧度开始结束,正时针、逆时针,样式可配置的圆形可拖动进度条
使用方法
Using npm
npm i drag-arc -S
import DragArc from 'drag-arc';
也可下载直接引入js
<script src= 'dist/drag-arc.min.js'>
调用
new DragArc({
el: dom,
value: 10,
change: (v) => {
console.log(v)
},
...
})
属性
| Name | Description | Type | Default | Required | | - | - | - | - | - | | el | 放置组件的DOM元素 | Element | none | Y | | change| 当前值变化时触发的事件,回调参数为当前进度值Number(0-100)| Function | | mouseUp| 滑动结束,鼠标释放时调用该方法 | Function | | startDeg | 滑动圆弧的起始弧度 | Number| 0 | | endDeg | 滑动圆弧的结束弧度 |Number | 2 | | value | 默认值 | Number (0-100) | 0 | | textShow | 显示文字 | Boolean | true | | innerColor | 内侧弧度的颜色 | String | | outColor | 外侧圆弧背景颜色 | String,Array | | innerLineWidth | 内侧弧线宽 | Number | 1 | | innerLineDash | 内侧弧线是否为虚线,如为虚线直接设置虚线线宽,默认不显示虚线 | Number | 0 | | outLineWidth | 外侧弧线宽 | Number | 20 | | counterclockwise | 逆时针方向 | Boolean | true | | sliderColor | 滑块颜色 | String | | sliderBorderColor | 滑块边框颜色 | String | #fff| | showDrag | 是否显示滑块 | Boolean | true |
这里startDeg,endDeg 设置为任意数值n,表示表示n * π, 如示例为 0 和1 ,表示0 到 π ;
方法
| draw(n) | 设置当前进度为n | Number (0-100) | | - | - | - |