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

文章探讨了开发步进器组件的思路,包括使用Vant组件库的方法实现加减功能,通过onTap和onChange事件处理数据变化,限制最小值和最大值。还提到长按事件实现连续加减,并通过定时器控制,以及输入框的非法字符过滤和数字格式约束。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述

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

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

我理解的Vant组件的思路

在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

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

在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值