因公司需要做一个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：数值发生改变后调用， 可选参数
因为样式原因，最小刻度计算始终有点问题，
背景 因公司需要做一个h5项目，vue-cli3 搭建的项目，vue 版本是2.x.里面有几处刻度尺效果，网上找了...
前言 在薄荷app的用户信息页看到在记录身高时，利用左右滑动刻度尺来取值。原本以为是h5实现，但上网搜索后并没有找...
Vue-ydui 是 YDUI Touch 的一个基于 Vue2.x 的移动端&微信UI实现版本，专为移动端打造，...
前言 移动端, 使用vue为了良好的用户体验, 会需要实现APP形式的切换页面的左滑和右滑效果 实现原理, vue...
1、使用Flexible实现手淘H5页面的终端适配2、再聊移动端页面的适配3、如何在Vue项目中使用vw实现移动端...
在子页面把整个页面做绝对定位，覆盖整个屏幕，子父页面将 router-view 用 transition 套起来...
Vue项目的移动端页面上加上左右滑动效果，安装插件vue-touch注意：如果Vue是2.x 的版本的话，一定要下...
项目是基于 vue2 的移动端项目 1、实际效果 https://github.com/modood/Admini...
在vue中实现rem布局：postcss-pxtorem+amfe-flexible实现移动端适配环境参数：vue...
一、 使用场景：有适配pc端改为适配pc端和移动端，使用2套css代码实现App.vue 注意：为2套css分别指...
本文标题：Vue 2实现移动端刻度尺效果
本文链接：https://www.haomeiwen.com/subject/lebzdxtx.html
网友评论