1.0.8 • Published 2 years ago

drag-arc v1.0.8

Weekly downloads
4
License
ISC
Repository
-
Last release
2 years ago

可拖拽的弧形进度条组件(支持移动端)

这是一个支持任意弧度开始结束,正时针、逆时针,样式可配置的圆形可拖动进度条

使用方法

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)
    },
    ...
})

属性

NameDescriptionTypeDefaultRequired
el放置组件的DOM元素ElementnoneY
change当前值变化时触发的事件,回调参数为当前进度值Number(0-100)Function
mouseUp滑动结束,鼠标释放时调用该方法Function
startDeg滑动圆弧的起始弧度Number0
endDeg滑动圆弧的结束弧度Number2
value默认值Number (0-100)0
textShow显示文字Booleantrue
innerColor内侧弧度的颜色String
outColor外侧圆弧背景颜色String,Array
innerLineWidth内侧弧线宽Number1
innerLineDash内侧弧线是否为虚线,如为虚线直接设置虚线线宽,默认不显示虚线Number0
outLineWidth外侧弧线宽Number20
counterclockwise逆时针方向Booleantrue
sliderColor滑块颜色String
sliderBorderColor滑块边框颜色String#fff
showDrag是否显示滑块Booleantrue

这里startDeg,endDeg 设置为任意数值n,表示表示n * π, 如示例为 0 和1 ,表示0 到 π ;

方法

draw(n)设置当前进度为nNumber (0-100)

实现介绍

实现方法查看

1.0.8

2 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago