vue如何实现短信验证码输入框

秋天来啦!秋天来啦!田野里就是美丽的图画。花生躲在地下,包着红色的毛毯,住在土黄色的房间里睡大觉。玉米姐姐穿着绿色的裙子,在叶子上跳舞,南瓜爷爷鼓着金黄色的大肚子,坐着高级的南瓜车,一边看风景一边享受。西红柿露出火红火红的脸蛋,正对着我们微笑。谁使秋天这样美?看,田野里的菊花做出了回答,菊花顶着一个爆炸头,在微风中轻轻摇动,好像在说:是勤劳的人们画出了秋天的图画。

本文实例为大家分享了vue实现短信验证码输入框的具体代码,供大家参考,具体内容如下

先上最终效果 (此处代码显示的是短信验证码框的效果 其余部分并未放上去)

html

<div class="code">
  <input id="first" class="inputStyle" v-model="code[0]"
  style="border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;"
  type="text"/>
  <input id="second" class="inputStyle" v-model="code[1]"style="border-left:1px solid #c6c6c6;" type="text"/>
  <input id="third" class="inputStyle" v-model="code[2]"style="border-left:1px solid #c6c6c6;" type="text"/>
  <input id="forth" class="inputStyle" v-model="code[3]" style="border-left:1px solid #c6c6c6;" type="text"/>
  <input id="fifth"class="inputStyle" v-model="code[4]"
  style="border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-left:1px solid #c6c6c6;" 
  maxlength="1"
  type="text"/>
</div>

js

data (){
     return {    
       smsCode:'',
    code:new Array(5),
    codeId:['first','second','third','forth','fifth']
      }
   },
     watch:{
  code:function(newValue,oldValue){
   console.log('newValue.length'+newValue.length)
   let tempValue=''
   for(let i=0;i<newValue.length;i++){
   if(i==5){
    console.log(i)
    break
   }
   if(newValue[i]){
    tempValue=tempValue+newValue[i] 
   }
   }
   this.smsCode=tempValue
   console.log('smsCode '+this.smsCode)
   let m=tempValue.split("")
   let location=0
   for(let i=0;i<newValue.length;i++){
   if(m[i]&&i<5){
    location++
    newValue[i]=m[i]
   }else{
    newValue[i]=''
   }
   }
   // console.log(this.codeId[i])
   if(location<1){
   location=1
   }else if(location>5){
   location=5
   }
   document.getElementById(this.codeId[location-1]).focus()
  }
  },

CSS

.inputStyle{
 width:20%;
 height:100%;
 text-align:center;
 border:none;
}

本文vue如何实现短信验证码输入框到此结束。从风雨中寻找愉悦,在挫折中持续坚韧。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
Vue路由参数的传递与获取方式详细介绍

vue学习记录之动态组件浅析

如何解决ElementUI组件中el-upload上传图片不显示问题

解读element el-upload上传的附件名称不显示 file-list赋值

一篇关于el-table-column的formatter的如何使用及说明