vue实现模拟手机支付宝/微信输入6位验证码

2024-03-02 08:46:58

Vue前端实现6位验证码输入框效果

这是一个输入六位验证码的弹窗,在输入一位数字可以自动跳到下一个输入框,和删除当前输入框的内容后聚焦到上一个输入框,并且输满六位验证码后调接口验证验证码是否正确.
今天想简单分享一下,当然也有参考过一些大神的代码,最后才实现了这样的效果,如果有错误还请多指教

先看看效果：

效果图片

源代码

1.template代码

<template>
  <div class="container">
    <div class="modal-backdrop"  v-show="isModalVisible"    @click="closeBackground"  >
      <div class="modal" @click.stop>
      <div class="font1">获取验证码</div>
      <div class="font2">验证码已发送至（+86）{{telephone}}</div>
      <div class="code-input-main" >
    <input 
        pattern="\d*"
        class="code-input-main-item" 
        id="phoneCode1" 
        v-model="phoneCode0" 
        oninput="value=value.length>1?value.substr(0,1):value;"  
        maxlength="1" 
        type="number"/><input 
        pattern="\d*"
        class="code-input-main-item" 
        id="phoneCode2"
        v-model="phoneCode1"  
        oninput="value=value.length>1?value.substr(0,1):value;"  
        maxlength="1" 
        type="number"/><input 
        pattern="\d*"
        class="code-input-main-item" 
        id="phoneCode3" 
        v-model="phoneCode2" 
        oninput="value=value.length>1?value.substr(0,1):value;"  
        maxlength="1" 
        type="number"/><input 
        pattern="\d*"
        class="code-input-main-item" 
        id="phoneCode4" 
        v-model="phoneCode3"  
        oninput="value=value.length>1?value.substr(0,1):value;"  
        maxlength="1" 
        type="number"/><input 
        pattern="\d*"
        class="code-input-main-item" 
        id="phoneCode5" 
        v-model="phoneCode4" 
        oninput="value=value.length>1?value.substr(0,1):value;"  
        maxlength="1" 
        type="number"/><input 
        pattern="\d*"
        class="code-input-main-item" 
        id="phoneCode6" 
        v-model="phoneCode5"  
        oninput="value=value.length>1?value.substr(0,1):value;"  
        maxlength="1" 
        type="number"/>
      </div>
      </div>
    </div>
  </div>
</template>

2.script代码

<script>
export default {
  data() {
    return {
            isModalVisible:true, // 是否展示获取验证码弹窗
            phoneCode:"",  // 验证码6位
            phoneCode0:"", // 输入框1的值
            phoneCode1:"", // 输入框2的值
            phoneCode2:"", // 输入框3的值
            phoneCode3:"", // 输入框4的值
            phoneCode4:"", // 输入框5的值
            phoneCode5:"", // 输入框6的值
            telephone:"1333***8912", // 手机号
<span class="token punctuation">}</span><span class="token punctuation">;</span>

},
mounted() {
this.goNextInput(’.code-input-main-item’);// 实现输入框自动聚焦
},
methods: {
closeBackground(){ // 关闭验证码弹窗
this.isModalVisible=false
},
goNextInput(el){ // 实现输入框自动聚焦
var that = this;
var txts = document.querySelectorAll(el);// 获取所有input对象
for(var i = 0; i<txts.length;i++){ // 循环input添加监听事件
var t = txts[i];
t.index = i; // input赋值索引值
t.onkeydown=function(e){ // 键盘按下时
var e = e ? e : event;
var k = e.keyCode || e.which;
if (k == 8) { // 如果是删除事件
if(this.value!=""){ // 如果当前input不为空
this.value = “”; // 清空当前input的值
switch(this.index) { // 根据索引值判断是当前哪个input的值需要被清空
case 0:
that.phoneCode0 ="";
break;
case 1:
that.phoneCode1 ="";
break;
case 2:
that.phoneCode2 ="";
break;
case 3:
that.phoneCode3 ="";
break;
case 4:
that.phoneCode4 ="";
break;
case 5:
that.phoneCode5 ="";
break;
}
}else{ // 当前input为空,则聚焦到上一个input
var back = this.index-1;
that.value = “”;
if(back <0) return; // 如果索引值小于0,则返回
txts[back].focus();
}
}
}
t.onkeyup=function(e){ // 键盘松开时
var e = e ? e : event;
var k = e.keyCode || e.which;
if (k != 8) { // 如果不是删除事件
that.value=this.value.replace(/^(.).*$/,’$1’);// 当前输入框保留一位数字
var next = this.index + 1; // 索引值加1
if(next > txts.length-1 ) // 如果是最后一个input时执行事件
{ that.phoneCode = “”;
that.phoneCode = that.phoneCode0+that.phoneCode1+that.phoneCode2+that.phoneCode3+that.phoneCode4+that.phoneCode5;
// that.CheckSmsCode(); // 验证验证码是否正确
return;
}
if (this.value) { txts[next].focus(); } // 如果有值则跳到下一个input
}
}
}
},

} // methods
};
</script>

在实现删除当前输入框的值并且自动聚焦到上一个input的时候碰到了一个坑
使用js清除input的value值时发现怎样都清除不了输入框的值
有一个短暂的清空效果随后又赋值, 当时怎么也想不通为什么
后来发现是因为input输入框使用了vue的v-model双向绑定
每个input都绑定了一个data值,因此在清除input的value同时还要清除其绑定的data数据,否则没办法清除input的值
当然其实input可以不使用v-model绑定值的,可以全程使用js来获取input对象里的值,但是当时觉得方便取值

3.style部分(less语言)

<style  lang="less" scoped >
 @color:rgba(255,96,5,1);
 /* 遮罩层 */
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
/* 弹窗 */
.modal {
width:670px;
height:480px;
background:rgba(255,255,255,1);
border:2px solid rgba(230,230,230,1);
border-radius:10px;
padding: 0 92px;
  /* 行 */
}
.font1{ // 获取验证码字体
    width:210px;height:40px;font-size:40px;font-family:Microsoft YaHei;font-weight:400;
    color:rgba(40,40,40,1); line-height:40px;margin-top: 58px;
}
.font2{ // 验证码已发送至（+86）
    width:550px;height:29px;font-size:28px;font-family:Microsoft YaHei;font-weight:400;color:rgba(40,40,40,1);line-height:29px;
    margin-top: 40px;
}
.code-input-main { //  输入验证码div
    width:100%;
    height: 60px;
    text-align: center;
    margin-top: 56px;
}
.code-input-main-item {  // input的样式
    width:60px;
    height:60px;
    padding: 2px;
    border:2px solid rgba(230,230,230,1);
    border-radius:6px;
    display: inline-block;
    &:not(:first-child){  margin-left:25px;}
    &:first-child{
        margin-left: -4px;
    }
    text-align: center;
    z-index: 1;
    font-size: 40px;
    vertical-align: top;

}
input { // 原生input样式清除
background: none;
outline: none !important;
-webkit-appearance: none !important;
-webkit-appearance: none !important;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
</style>

码农公寓

Vue前端实现6位验证码输入框效果

效果图片

源代码

1.template代码

2.script代码

3.style部分(less语言)

相关文章