Vue 2实现移动端刻度尺效果

背景

因公司需要做一个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.引用控件,并注册 ,

value 当前值

min 最小值

max 最大值

onChange:数值发生改变后调用, 可选参数

不足

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

你可能感兴趣的:(Vue 2实现移动端刻度尺效果)