背景
因公司需要做一個h5項目凑术,vue-cli3 搭建的項目跃洛,vue 版本是2.x.里面有幾處刻度尺效果,網上找了很多缅帘,都不能很好的嵌入項目。
便下決心做一個靈活度高的刻度尺,樣式基本都是網上抄來的愈腾,自己實現的就是具體的刻度尺長度,拖動后計算值岂津,吸附臨近的數值等效果
效果圖
部署
項目地址:https://github.com/alvin198761/vue-ruler
這是一個vue-cli3創(chuàng)建出來的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:數值發(fā)生改變后調用, 可選參數
不足
因為樣式原因粱甫,最小刻度計算始終有點問題泳叠,