VUE 注册验证码页面实例

Posted 2021-01-17 banyuege

代码如下  无css

<template>
  <div>
    <header>
      <router-link to="/inon"><i class="el-icon-back" ></i></router-link>
      <p>手机号码验证</p>
    </header>
    <main>
      <p>为了安全，我们会向手机发送验证码</p>
      <div>
        <input type="text" maxlength="1" tabindex="0" ref="a1" v-on:input="$refs.a2.focus()">
        <input type="text" maxlength="1" ref="a2" v-on:input="$refs.a3.focus()">
        <input type="text" maxlength="1" ref="a3" v-on:input="$refs.a4.focus()">
        <input type="text" maxlength="1" ref="a4" v-on:input="submit()">
      </div>
    </main>
  </div>

</template>

　

export default {
  name:‘trans‘,
  data:function(){
    return{
      time:5,
      show:false,
      CountDown:true,
    }
  },
  methods:{
    submit(){
      alert("注册成功");
    },
    Time(){
      let t =setInterval(()=>{
        this.time--;
        if(this.time==0){
          clearInterval(t);
          this.show=true;
          this.CountDown=false;
          this.tttime=5;
        }
      },1000)
    },
    TTTime(){
      this.time=5
      this.show=false;
      this.CountDown=true;
      let t=setInterval(()=>{
        this.time--;
        if(this.time==0){
          clearInterval(t);
          this.show=true;
          this.CountDown=false;
        }
      },1000)
    }
  },
  mounted() {
    this.$refs.a1.focus();
    this.Time();
  },
}