virtual-ruler
0.1.5 • Public • Published
vue virtual ruler
vue2 高性能刻度尺组件
Installation
npm install virtual-ruler --save
import 'virtual-ruler/dist/virtual-ruler.css';
import VirtualRuler from 'virtual-ruler'
export default {
name: 'example',
components: {
VirtualRuler
},
data () {
return {
v2: 35
}
}
}
<virtual-ruler
ref="ruler"
top-border
:height="50"
:min="300"
:max="2500"
:default-value="v2"
:gap="10"
:value-gap="0.1" @change="v2 = $event">
</virtual-ruler>
API
Table Attributes
属性 |
说明 |
类型 |
必选 |
默认值 |
default-value |
默认值 |
Number |
false |
min |
min |
最小刻度值 |
Number |
false |
0 |
max |
最大刻度值 |
Number |
false |
100 |
gap |
刻度线间隔 |
Number |
true |
100 |
item-width |
刻度线宽度 |
Number|String |
true |
100 |
item-color |
刻度线颜色 |
String |
false |
#cccccc |
item-height |
刻度线高度计算函数 |
Function(index) |
false |
8、5、20 |
item-max-height |
刻度线最高高度 |
Number|String |
false |
Math.max(item-height) |
point-width |
刻度标线宽度 |
Number|String |
false |
1 |
point-color |
刻度标线宽度 |
String |
false |
#00C5CD |
point-style |
刻度标线自定义样式 |
Object |
false |
- |
label-gap |
刻度值label间隔 |
Number |
false |
10 |
show-label |
是否显示刻度值label |
Boolean |
false |
true |
value-gap |
刻度值的倍数,例如刻度值为 100,倍数为0.1则值为100 * 0.1 |
Number |
false |
1 |
buffer |
缓冲数量,预先渲染 |
Number |
false |
10 |
height |
刻度尺高度 |
Number|String |
true |
- |
top-border |
刻度尺上边框 |
Boolean |
false |
false |
top-border-width |
刻度尺上边框宽度 |
Number|String |
false |
1 |
top-border-color |
刻度尺上边框颜色 |
String |
false |
#cccccc |
linear-gradient |
刻度尺背景渐变 |
Boolean |
false |
false |
linear-gradient-direction-var |
刻度尺背景渐变方向 |
Array |
false |
['to', 'right'] |
linear-gradient-color-var |
刻度尺背景渐变颜色 |
Array |
false |
['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 0) 25%', 'rgba(255, 255, 255, 0) 85%', 'rgba(255, 255, 255, 1) 100%'] |
auto-resize |
是否自动监听元素大小改变并重置刻度尺大小 |
Boolean |
false |
false |
label-style |
刻度值label样式 |
Object |
false |
- |
slots
属性 |
说明 |
参数 |
label |
刻度值插槽 |
value、index |
Events
事件名 |
说明 |
参数 |
change |
滑动实时触发 |
当前刻度值 |
Methods
方法名 |
说明 |
参数 |
setValue |
设置当前刻度值 |
刻度值 |
Package Sidebar
Install
Weekly Downloads