vue刻度尺组件

柔情只为你懂 2023-02-24 08:55 17阅读 0赞

# vue刻度尺组件 #

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

npm install cs-ruler

// 在 main.js 中引入
    
    import CsRuler from 'cs-ruler'
    Vue.use(CsRuler)

// 在.vue文件中使用
    
    <cs-ruler @post-NumValue="rulerNum" :NowNum='100' :maxNum='2000' :minNum='0'></cs-ruler>

> rulerNum 是一个函数,需要一个值去接收
> 
>     methods: { 
>         //子组件传递刻度表
>         rulerNum(value){ 
>           this.NumValue = value
>         },
>       },
> 
>  *  使用@post-NumValue来`接收滚动的值`
>  *  NowNum为`初始值`,默认为100,可不传
>  *  maxNum为刻度尺的`最大值`,默认为1000,可不传
>  *  minNum为刻度的`最小值`,默认为0,可不传
> 
> 新增`倍数字段oneGridValue`,将整体的数值扩大,默认为1(最大值与最小值也会相应的扩大)
> 
>     <cs-ruler :oneGridValue='1'></cs-ruler>
> 
> 新增可配置`指针颜色`
> 
>     <cs-ruler :pointerColor="'red'"></cs-ruler>
> 
> 可配置`小数`：可开启小数,整体除以10,默认不开启(最大值与最小值需要相应的变大10倍)
> 
>     <cs-ruler ispoint></cs-ruler>
> 
> 可配置一页`显示多少格`,默认一页为40个小格,最低30个小格,数字为10的倍数
> 
>     <cs-ruler :ruleWidth='40'></cs-ruler>
> 
> 配置`字体大小`以及刻度值的显示
> 
>     <cs-ruler :numSize='40'></cs-ruler>
> 
> 新增`滚动结束`后发送给父级消息事件,具体使用方法如下：
> 
>     <cs-ruler @scroll-end="endEvent"></cs-ruler>
>     
>     // 在方法中监听scroll-end传递的值,值为true,则滚动完成
>     
>     methods: {
>       //子组件结束传值true
>       endEvent(val){
>         console.log(val)
>       }
>     },
> 
> 新增`开始滚动`后发送给父级消息事件,具体使用方法如下：
> 
>     <cs-ruler @scroll-start="startEvent"></cs-ruler>
>     
>     // 在方法中监听scroll-start传递的值,值为true,则滚动完成
>     
>     methods: {
>       startEvent(val){
>         console.log(val)
>       }
>     },