Nondeterministic Polynomial Munchies

    virtual-ruler

    0.1.5 • Public • Published

    vue virtual ruler

    vue2 高性能刻度尺组件 image

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

    Install

    npm i virtual-ruler

    DownloadsWeekly Downloads

    10

    Version

    0.1.5

    License

    ISC

    Unpacked Size

    1.97 MB

    Total Files

    25

    Last publish

    Collaborators

    • zhouxianjun