Vue实现简单实用的 6 位验证码输入框

最新推荐文章于 2024-05-07 09:20:21 发布
最新推荐文章于 2024-05-07 09:20:21 发布
阅读量1.2w 收藏 15
点赞数 8
分类专栏： 前端开发 文章标签： VUE CSS 输入框验证码 特效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lovefive5/article/details/84257062
版权

效果图如上。GitHub地址(包括打包成浏览器组件)，感谢支持！！！

在开发中，我们可能会经常遇到 验证码组件，上图就是我们设计师给的 UI

Remark：具体效果要看需求、样式还是要自己修改一下（可以自己传入 props 定义验证码的长度。）

-------------------------------------------

之前有小伙伴说没有效果，是因为我是贴了项目上的部分代码，颜色都是白色，现在已经设置了 #323232 , 可以直接看见效果啦。（！！！注意父级样式影响哦）

-------------------------------------------

方式一：直接 npm 安装使用

npm install @auspicious/vue-vercode

 引入组件

<template>
  <div>
    <vue-vercode r
最低0.47元/天 解锁文章
Auspicious5
关注
  • 8
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 12
    评论
专栏目录
VercodeComponent.vue
05-23
Vue实现简单实用的 6 位验证码输入框。 在开发中，我们可能会经常遇到 验证码组件，主要实现一下思路，样式还是要自己修改一下，可以自己传入 props 定义验证码的长度。
vue实现一个6个输入框的验证码输入组件
web前端开发
03-04 1297
来源 |https://segmentfault.com/a/1190000023041401要实现的功能：完全和单输入框一样的操作，甚至可以插入覆盖：1，限制输入数字2，正常输入3，b...
vue 实现6位数验证码框
dogface博客
12-23 2978
组件1 <template> <div> <div class="code-input-main"> <div class="code-input-main-item" v-for="(item,index) in codeList" :class="{'on':seat==index}" :key="index" @click="onClick(index)" &...
2024年最全Vue实现验证码登录_vue 验证码(1)，这是一份面向前端开发者的复习指南
最新发布
2301_82244279的博客
05-07 1475
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
vue3实现输入框短信验证码功能
qq_42259940的博客
03-18 639
1.按键删除，清空当前input，并跳转prevInput & 获取焦点,按键delete，清空当前input，并跳转nextInput & 获取焦点。按键Home/End键，焦点跳转first/最后一个input输入框。ArrowLeft/ArrowRight键点击后跳转上一个/下一个输入框获取焦点。通过el.clipboardData获取粘贴内容，判断是否为4/6位粘贴内容。2.判断按键为数字，则取第一个数字，然后跳转下一个input输入框获取焦点，如果为最后一个，则失去焦点，交互结束。
Vue前端实现6位验证码输入框效果
qq_33360476的博客
04-22 3304
Vue前端实现6位验证码输入框效果效果图片源代码1.template代码2.script代码3.style部分(less语言) 这是一个输入六位验证码的弹窗,在输入一位数字可以自动跳到下一个输入框,和删除当前输入框的内容后聚焦到上一个输入框,并且输满六位验证码后调接口验证验证码是否正确. 先看看效果： 效果图片 源代码 1.template代码 <template> <di...
js vue实现6位验证码输入框效果
日常分享
06-13 1134
说明 因业务需求需要有个6框连续输入的组件，这边是直接画了6个输入框，然后通过一些事件控制输入框的输入顺序，以及一些特殊处理。 效果 组件源码 <template> <div class="row-center captcha_input_wrapper"> <input v-for="(item,index) in captchas" :key="index" v-model="item.num" :id="......
Vue3实现6位验证码输入框,用户可以连续输入和删除
JackieDYH的博客
08-02 2398
函数中，我们首先判断是否按下的是 backspace 键，如果是，我们会阻止默认行为，然后检查当前输入框是否为空字符串。如果不为空，我们会将其置为空字符串，然后检查当前输入框的索引是否大于0。设置为当前输入框的索引减一，并将光标移动到前一个输入框。以下是一个简单的 Vue3 组件来实现6位验证码输入框的功能，其中用户可以连续输入和删除。设置为当前输入框的索引，以确保用户可以通过 tab 键和鼠标点击等操作来移动光标。设置为当前输入框的索引加一，并将光标移到下一个输入框。这个组件中，我们使用了。
vue3制作类微信的六位的密码输入框
m0_73481765的博客
12-14 785
这是一个 Vue 3 组件，用于创建一个自定义的密码输入框。这个输入框由6个小输入框组成，每个小输入框只能输入一个字符。当用户在一个小输入框中输入字符后，焦点会自动跳到下一个输入框，直到所有6个输入框都填满为止。当6个字符都输入完成后，会触发一个名为 'input-complete' 的自定义事件，并将输入的密码作为参数传递出去。
vue封装独立组件：实现分格密码输入框/验证码输入框
qq_45796592的博客
11-02 1297
实现分格密码输入框/验证码输入框
vue最常用的图片验证码(canvas绘图)
liuwenjie_的博客
02-14 999
使用数字和字母生成随机的四位数验证码，代码注释很清楚。 <template> <div class="img-canvas"> <canvas id="canvas" :width="width" :height="height" @click="handleDraw" ></canvas> </div> </template> <script&gt
Vue实现简单实用的 6 位验证码虚线输入框
Haines
06-06 861
效果图如上。GitHub地址(包括打包成浏览器组件)，感谢支持！！！ 在开发中，我们可能会经常遇到 验证码组件，上图就是我们设计师给的 UI Remark：具体效果要看需求、样式还是要自己修改一下（可以自己传入 props 定义验证码的长度。） ------------------------------------------- 之前有小伙伴说没有效果，是因为我是贴了项目上的部分代码，颜色都是白色，现在已经设置了 #323232 , 可以直接看见效果啦。（！！！注意父级样式影响哦） ----..
vue实现6位支付密码
08-10
借助vue-cli和vue的插件功能，实现六位密码插件，主要服务于pc站点
Vue实现6位数密码效果
12-11
在ios系统，原生 webview 嵌套H5页面使用时，编写完成的6位数输入密码，输入密码卡顿问题的解决方案： 如下图： 原因是因为，CSS 这块 造成的。简单来说，style left 为负数的时候出现的，android 目测不会出现此问题 input[type=tel] { opacity: 0; z-index: -1; position: absolute; left:-100%; } 解决方案： 重新设置 input样式问题 input[type=tel] { width: 0.1px; height: 0.1px; color: transparent; po
vue实现验证码输入框组件
08-28
Vue 实现验证码输入框组件 在最近的项目中，我们遇到了这样一个需求：输入 4 位或 6 位短信验证码，输入完成后收起键盘。下面我们将一步步地实现这个需求。 首先，我们需要布局排版验证码输入框组件。我们使用 `...
vue实现一个6个输入框的验证码输入组件功能的实例代码
10-15
在这个实例中，我们将讨论如何使用 Vue 来实现一个六位数字的验证码输入组件。这个组件具备多种交互功能，包括限制输入为数字、正常输入、通过退格键删除、在任意位置粘贴、通过滚轮微调数字大小以及自动覆盖光标后...
vue实现短信验证码输入框
10-15
主要为大家详细介绍了vue实现短信验证码输入框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue3实现6位验证码输入框,用户可以连续输入和删除
08-02
vue3实现6位验证码输入框
vue登录注册如何实现图像验证码
热门推荐
姚辉乾
11-04 1万+
先来上图，看一下最终效果图 公司的一个新项目，需要用到图形验证码进行判断。 第一步：需要把identify放到所需要的组件里面，把下面的代码塞进去即可。 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="content...
Vue 实现输入框短信验证码功能
05-10
实现输入框短信验证码功能，可以使用 Vue.js 的模板语法和组件化思想，具体实现步骤如下： 1. 创建一个包含输入框和发送验证码按钮的组件。 ```html <template> <div> <input type="text" v-model="code" /> <button @click="sendCode" :disabled="disabled">{{ buttonText }}</button> </div> </template> <script> export default { data() { return { code: '', disabled: false, buttonText: '发送验证码', countdown: 60 } }, methods: { sendCode() { // 发送短信验证码 // ... // 设置倒计时 this.disabled = true; this.buttonText = `${this.countdown}s 后重新发送`; const timer = setInterval(() => { this.countdown--; this.buttonText = `${this.countdown}s 后重新发送`; if (this.countdown === 0) { clearInterval(timer); this.disabled = false; this.buttonText = '发送验证码'; this.countdown = 60; } }, 1000); } } } </script> ``` 2. 在父组件中引入该组件，并监听子组件的输入事件。 ```html <template> <div> <sms-code @input="handleInput" /> <button @click="submit">提交</button> </div> </template> <script> import SmsCode from './SmsCode.vue'; export default { components: { SmsCode }, data() { return { phone: '', code: '' } }, methods: { handleInput(value) { this.code = value; }, submit() { // 提交表单 // ... } } } </script> ``` 在子组件中，使用 `v-model` 来实现与父组件的双向数据绑定。当输入框的值发生变化时，通过 `$emit` 方法将新的值传递给父组件。 ```html <template> <div> <input type="text" v-model="code" @input="$emit('input', code)" /> <button @click="sendCode" :disabled="disabled">{{ buttonText }}</button> </div> </template> <script> export default { data() { return { code: '', disabled: false, buttonText: '发送验证码', countdown: 60 } }, methods: { sendCode() { // 发送短信验证码 // ... // 设置倒计时 this.disabled = true; this.buttonText = `${this.countdown}s 后重新发送`; const timer = setInterval(() => { this.countdown--; this.buttonText = `${this.countdown}s 后重新发送`; if (this.countdown === 0) { clearInterval(timer); this.disabled = false; this.buttonText = '发送验证码'; this.countdown = 60; } }, 1000); } } } </script> ``` 这样就可以实现一个简单的输入框短信验证码功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Auspicious5

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值