Vant源码解析(三)van-stepper步进器

Vant源码解析(三)van-stepper步进器_第1张图片

先说下自己的开发思路,然后在对照下vant组件的思路,来查找下自己的不足。

这个步进器有加和减的功能,还有输入的功能,限制最小和最大的功能。

我理解的Vant组件的思路

Vant源码解析(三)van-stepper步进器_第2张图片
Vant源码解析(三)van-stepper步进器_第3张图片

点击事件都是onTap,根据变量进行判断是加还是减,数据的具体更改是onChage()方法,里面有个add()来进行加减。

Vant源码解析(三)van-stepper步进器_第4张图片

禁止改变,或者已经是最大或者最小,则返回真

Vant源码解析(三)van-stepper步进器_第5张图片

这个方法是为了防止0.1+0.2!=0.3的问题出现

Vant源码解析(三)van-stepper步进器_第6张图片

这个方法用来限定范围,规定小数点

Vant源码解析(三)van-stepper步进器_第7张图片

过滤非法字符,是否限制输入整数

Vant源码解析(三)van-stepper步进器_第8张图片

这样普普通通的加和减就实现了。

这个组件还有长按加减功能,监听手指的开始和结束,并且通过定时器,触发事件添加。最开始的接触事件,需要长一点的时间开始增加,然后中间的时间断更加断,最后结束时间,清除定时器。

Vant源码解析(三)van-stepper步进器_第9张图片
Vant源码解析(三)van-stepper步进器_第10张图片

最后还有个输入框的功能,可以阻止输入非法,和限制输入整数或者小数点位数。

Vant源码解析(三)van-stepper步进器_第11张图片

ps:现在上午上班11点了,饿了,想吃饭。

你可能感兴趣的:(微信小程序)