Vue3 如何封装一个合格的获取验证码组件

开发 前端
我们需要写一个 useCountDown 的 Hooks ,来编写倒计时的逻辑~大家在风中组件的时候,要有这种习惯,就是把一些逻辑比较紧密的代码抽取到一个 Hooks 中去。

获取验证码组件

最近封装了一个 获取验证码 的组件,虽然算是一个比较小的组件,但是还是感觉比较有意思的,大致效果如下:

图片图片

最基础的组件

我们可以从简单的开始,先实现一个比较简单基础的组件,后面再去完善它,最基础的代码如下:

图片图片

这个时候可以看到这个组件的雏形已经出来了!

图片图片

实现倒计时

接下来我们需要写一个 useCountDown 的 Hooks ,来编写倒计时的逻辑~大家在风中组件的时候,要有这种习惯,就是把一些逻辑比较紧密的代码抽取到一个 Hooks 中去。

注意:setState 是异步更新,所以想获取最新值需要使用useRef。

图片图片

封装完后可以到组件中去使用。

图片图片

这样就能达到想要的倒计时效果,但是还是有很多不足,比如按钮没有禁用,而且尺寸不能自定义,也没有响应式把验证码内容暴露出去

图片图片

完善组件封装

上面的组件封装的太简单了,一个好的组件需要具有比较好的自定义性、拓展性,所以我们需要完善一下组件的封装

可以把这个组件拆成两个部分:

  • CountdownInput输入框
  • CountButton按钮

CountdownInput输入框

图片图片

CountButton

图片图片

最终使用

图片图片

效果如下:

图片 图片

责任编辑:武晓燕 来源: 前端之神
相关推荐

2022-09-20 11:00:14

Vue3滚动组件

2020-01-06 13:11:30

技术工具

2024-08-12 08:33:05

2010-01-08 13:46:30

VB.NET中文验证码

2021-08-11 06:57:17

验证码图片显示

2020-12-20 10:07:57

Canvas图形验证码javascript

2022-10-17 08:03:47

封装vue组件

2024-02-28 08:35:26

内置组件Vue3页面

2015-09-21 15:31:05

php实现验证码

2015-03-23 18:03:36

短信验证码正则自动填写

2021-07-07 08:00:50

Vue3 router-linAppLink

2013-06-19 10:19:59

2022-07-18 10:43:12

项目TienChinJava

2024-08-13 09:26:07

2023-12-08 08:02:40

开箱React​组件

2022-07-27 08:40:06

父子组件VUE3

2024-12-09 00:00:03

Vue3项目表单

2022-02-11 07:10:15

验证码

2021-01-19 10:29:34

短信验证码密码
点赞
收藏

51CTO技术栈公众号