背景

因公司需要做一个h5项目，vue-cli3 搭建的项目，vue 版本是2.x.里面有几处刻度尺效果，网上找了很多，都不能很好的嵌入项目。

便下决心做一个灵活度高的刻度尺，样式基本都是网上抄来的，自己实现的就是具体的刻度尺长度，拖动后计算值，吸附临近的数值等效果

效果图

部署

项目地址：https://github.com/alvin198761/vue-ruler

这是一个vue-cli3创建出来的vue 2.x 项目，部署步骤如下

1. 下载项目，并解压

2. npm install

3.npm run start

4.引用控件，并注册 ，

<DLRuler :value="50" :min="30" :max="300" :onChange="changeWeight"></DLRuler>

<DLRuler :value="60" :min="10" :max="100"></DLRuler>

value 当前值

min 最小值

max 最大值

onChange：数值发生改变后调用， 可选参数

不足

因为样式原因，最小刻度计算始终有点问题，