用vant倒计时做一个发送验证码,简单快捷


theme: channing-cyan

咱先把结构整出来,结构分成两部分,一部分是倒计时开始,一部分是倒计时结束。我们在外层写个div,你也可以传入一个props字符串类型来作为div的class名字,这样可以根据需要,改变你的UI。然后我们引入van-count-down,倒计时组件,它可以绑定一个time时间,然后自定义,取值seconds秒数作为我们的倒计时时间

image.png

我们看到,van-count-down上绑定了一个@finish方法,这个方法是组件提供的一个倒计时结束方法。结束时我们把time归零,然后重新进行倒计时;


父组件中这样使用



我们发送验证码之后,通知父组件去进行发送验证码的接口请求,并在成功后归零验证码;一般我们在发送验证码之前,业务上需要先填写手机号,这里就简单给大家写一下,大家可以根据自己的业务需求做校验。到这里,一个简单的发送验证码就写完了。UI大家自己去自由发挥吧,这里就不给大家提供了,觉得有帮助的,点个赞吧,感谢您的阅读与支持

你可能感兴趣的:(用vant倒计时做一个发送验证码,简单快捷)