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 | 设置当前刻度值 | 刻度值 |