博客

1、安装刻度尺组件

npm install cs-ruler

2、在main.js中全局引入组件

import CsRuler from 'cs-ruler'//刻度尺组件
Vue.use(CsRuler)

3、组件使用

<cs-ruler 
            @post-NumValue="rulerNum" 
            :NowNum='100' 
            :maxNum='120' 
            :minNum='60'
            :numSize='10'
            :ruleWidth='40'
            :pointerColor="'rgb(92, 212, 171)'"
            @scroll-end="endEvent"
            @scroll-start="startEvent"
           >
         </cs-ruler>

rulerNum(value){
        this.NumValue = value
        console.log(value,'选中值value')
    },
    endEvent(val){
        console.log(val)
    },
     startEvent(val){
        console.log(val)
    },

效果如下图：