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

已于 2024-08-02 15:41:45 修改
阅读量283 收藏 1
点赞数 15
文章标签： vue.js 前端 javascript
于 2024-07-30 09:28:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42190182/article/details/140787978
版权

获取验证码组件

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

 最基础的组件

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

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

 实现倒计时

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

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

 

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

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

 完善组件封装

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

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

  • CountdownInput输入框

  • CountButton按钮

 CountdownInput输入框

 CountButton按钮

 最终使用

 

 效果如下：

宇生Echo
关注
  • 15
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
破解一个滑块验证码需要多少行代码？两千？一千？两百行就够了！
Pythoncxy的博客
09-21 486
做网络爬虫的同学肯定见过各种各样的验证码，比较高级的有滑动、点选等样式，看起来好像挺复杂的，但实际上它们的核心原理还是还是很清晰的，本文章大致说明下这些验证码的原理以及带大家实现一个滑动验证码。 加群获取源码：626017123 我之前做过 Web 相关开发，尝试对接过 Lavavel 的极验验证，当时还开发了一个 Lavavel 包：https://github.co...
一个合格的初级前端工程师需要掌握的模块笔记，实战篇
天真爱器
06-09 210
1、ant-design的使用总结及常用组件和他们的基本用法? ant-design为React，Angular和Vue都提供了组件，同时为PC和移动端提供了常用的基础组件。ant-design提供的demo非常的丰富并且样式能够基本的覆盖开发需求。antd的Demo因为是多人编写的，所以可以看到不同样式的实现都有，可以很好的满足不同开发的风格。 常用的组件有：Button，Form，Radio，Select，TimePicker，Upload，Table等。使用时需要可以参考Demo来编写，并且在组件界面
vue实现验证码输入框组件
08-28
最近做项目遇到这样的需求要求输入4位或6位短信验证码，输入完成后收起键盘。实现步骤大家参考下本
vue3-captcha（vue3行为验证码）
06-20
vue3-captcha（vue3行为验证码）
vue3前端实现图形验证码
spuerSun的博客
05-26 3642
vue3 identify插件使用
vue3 使用腾讯云验证码
王佩健的博客
03-01 1276
在index引入js <script type='text/javascript' src="https://ssl.captcha.qq.com/TCaptcha.js"></script> 使用 <el-button class="button" type="primary" size="medium" @click="verificationCode">查询</el-button> 方法 function verificationCode()
vue3简易文字验证码
社会人
10-01 697
赋值 灵活点直接父组件传过去，可以自己改造。大神勿喷，简易版本，demo中可以用一下。首先创建一个生成数字的js。使用方式在页面中引入。
vue3 实现登录验证码
热门推荐
weixin_71403100的博客
08-22 1万+
vue3项目----实现登录验证码vue3项目前提条件：已安装引入【element-plus】，【vue-router@4】，【sass】等。
谷粒商城项目搭建思路
super_song的博客
06-21 1994
文章目录1. 基础篇核心技术点1.1 搭建环境2.高级篇核心技术点3. 集群篇 1. 基础篇 核心技术点 微服务基础开发： 逆向工程、微服务基础开发 SpringBoot、Mybatis、MybatisPlus、JCR303、Restful Maven、Git、Vagrant、Linux、Docker Aliyun-Oss、MySQL、Redis ES6、Vue、element-ui 目标：从0开始做一个合格的小全栈程序员 1.1 搭建环境 使用VirtualBox搭建虚拟机环境，需要设置cpu 2.高
web前端面试总结(自认为还算全面哈哈哈哈哈！！！）
Zwx886的博客
10-23 2987
一、CSS问题 1.flex布局 display:flex; 在父元素设置，子元素受弹性盒影响，默认排成一行，如果超出一行，按比例压缩 flex:1; 子元素设置，设置子元素如何分配父元素的空间，flex:1,子元素宽度占满整个父元素align-items:center 定义子元素在父容器中的对齐方式，center 垂直居中justify-content:center 设置子元素在父元素中居中，...
15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)
uuuyy_的博客
01-07 227
前言 设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经验的凝练和总结,能更大限度的优化代码以及对已有代码的合理重构.作为一名合格的前端工程师,学习设计模式是对自己工作经验的另一种方式的总结和反思,也是开发高质量,高可维护性,可扩展性代码的重要手段. 我们所熟知的金典的几大框架,比如jquery, react, vue内部也大量应用了设计模式, 比如观察者模式, 代理模式, 单例模式等.所以作为一个架构师,设计模式是必须掌握的. 在中高级前端工
vue3 - 验证码- 数英混合
nihuitingshuo的博客
06-03 426
验证码
vue3实现发送验证码功能
sinat_31773153的博客
03-07 746
vue3实现发送验证码功能
在Vue3中实现滑动验证码
一起学习
12-28 2500
本文主要介绍在Vue3中实现滑动验证码。
vue3 canvas 自定义验证码组件
最新发布
weixin_42498594的博客
06-29 434
需求：视频播放一段时间验证一下是否有人观看，弹框弹出验证码验证。
vue3获取验证码+背景切换
m0_74060440的博客
12-24 1139
验证码+随机背景颜色
vue3+vite3+typescript实现验证码功能及表单验证
分享Java，vue学学习笔记
04-17 1383
vue3+vite3+typescript实现验证码功能及表单验证
vue3生成点选验证码，前端校验
q1424966670的博客
08-18 872
先看效果图。
使用uniapp 封装一个获取验证码组件
05-21
好的，我可以为您提供一些思路和代码示例。下面是一个简单的获取验证码组件的示例： ```html <template> <div class="verification-code"> <input type="text" v-model="phoneNumber" placeholder="请输入手机号" /> <button :disabled="countdown > 0" @click="getCode">{{ buttonText }}</button> </div> </template> <script> export default { data() { return { phoneNumber: "", countdown: 0, buttonText: "获取验证码", timer: null, }; }, methods: { getCode() { if (!this.phoneNumber) { alert("请输入手机号！"); return; } // 发送验证码接口 // ... // 模拟倒计时 this.countdown = 60; this.buttonText = `${this.countdown}秒后重新获取`; this.timer = setInterval(() => { this.countdown--; if (this.countdown <= 0) { clearInterval(this.timer); this.timer = null; this.buttonText = "获取验证码"; } else { this.buttonText = `${this.countdown}秒后重新获取`; } }, 1000); }, }, beforeDestroy() { if (this.timer) { clearInterval(this.timer); this.timer = null; } }, }; </script> <style scoped> .verification-code { display: flex; flex-direction: row; justify-content: center; align-items: center; } input { width: 80%; height: 40px; font-size: 16px; padding: 5px; margin-right: 10px; border-radius: 4px; } button { width: 20%; height: 40px; background-color: #409eff; border: none; color: #fff; font-size: 16px; border-radius: 4px; cursor: pointer; } button:disabled { background-color: #b5b5b5; cursor: not-allowed; } </style> ``` 这个组件包含一个输入框和一个按钮，当用户点击按钮时，会触发 `getCode` 方法，该方法会先检查用户输入的手机号，然后向后端发送验证码请求，并开启一个模拟的倒计时，防止用户重复获取验证码。在倒计时过程中，按钮会显示剩余时间，倒计时结束后，按钮会重新变为可用状态。同时，为了防止组件销毁时倒计时仍然在进行，我们需要在组件销毁前清除计时器。 以上示例代码基于 Vue.js 和 uni-app 框架，您可以根据您的实际需求进行修改和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值