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>
属性 | 说明 | 类型 | 必选 | 默认值 |
---|---|---|---|---|
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 | - |
属性 | 说明 | 参数 |
---|---|---|
label | 刻度值插槽 | value、index |
事件名 | 说明 | 参数 |
---|---|---|
change | 滑动实时触发 | 当前刻度值 |
方法名 | 说明 | 参数 |
---|---|---|
setValue | 设置当前刻度值 | 刻度值 |