vue刻度尺组件

vue刻度尺组件

刻度尺：参考文档：https://python.ctolib.com/328921371-ruler.html

npm install cs-ruler

// 在 main.js 中引入

import CsRuler from 'cs-ruler'
Vue.use(CsRuler)

// 在.vue文件中使用

rulerNum 是一个函数,需要一个值去接收

methods: {
    //子组件传递刻度表
    rulerNum(value){
      this.NumValue = value
    },
  },

• 使用@post-NumValue来接收滚动的值

• NowNum为初始值,默认为100,可不传

• maxNum为刻度尺的最大值,默认为1000,可不传

• minNum为刻度的最小值,默认为0,可不传

新增倍数字段oneGridValue,将整体的数值扩大,默认为1(最大值与最小值也会相应的扩大)

新增可配置指针颜色

可配置小数：可开启小数,整体除以10,默认不开启(最大值与最小值需要相应的变大10倍)

可配置一页显示多少格,默认一页为40个小格,最低30个小格,数字为10的倍数

配置字体大小以及刻度值的显示

新增滚动结束后发送给父级消息事件,具体使用方法如下：

// 在方法中监听scroll-end传递的值,值为true,则滚动完成

methods: {
  //子组件结束传值true
  endEvent(val){
    console.log(val)
  }
},

新增开始滚动后发送给父级消息事件,具体使用方法如下：

// 在方法中监听scroll-start传递的值,值为true,则滚动完成

methods: {
  startEvent(val){
    console.log(val)
  }
},