支付密码组件

支付密码组件

<template>
  <div class='warp'>
    <div class="container">
      <div class="setpwd">
        <div class="label-tit">请输入密码：</div>
        <input
          v-for="(item,index) in password"
          :key="index"
          v-model="item.pwd"
          ref="pwd"
          @input="inputFinash(index,'password')"
          @focus="showFocus(index,'password')"
          @keydown="inputDirection(index,'password')"
          class="password"
          type="tel"
          maxlength="1"
        />
        <div class="tip" v-show="!isNumber">请输入6位数字！</div>
      </div>

      <div class="checkpwd">
        <div class="label-tit">请再次输入密码：</div>
        <input
          v-for="(item,index) in checkPassword"
          :key="index"
          v-model="item.pwd"
          ref="checkPwd"
          @input="inputFinash(index,'checkpassword')"
          @focus="showFocus(index,'checkpassword')"
          @keydown="inputDirection(index,'checkpassword')"
          class="checkpassword"
          type="tel"
          maxlength="1"
        />
        <div class="tip" v-show="!isSame">两次密码不一致！请重新输入</div>
      </div>
      <div class="footer">
        <button class="cancel" @click.prevent="cancel">取消</button>
        <button class="enter" @click.prevent="enter">确定</button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  components: {},
  data() {
  return {
    password:[
      {
        pwd:''
      },
      {
        pwd:''
      },
      {
        pwd:''
      },
      {
        pwd:''
      },
      {
        pwd:''
      },
      {
        pwd:''
      },
    ],
    checkPassword:[
      {
        pwd:''
      },
      {
        pwd:''
      },
      {
        pwd:''
      },
      {
        pwd:''
      },
      {
        pwd:''
      },
      {
        pwd:''
      },
    ],
    activeId:0,
    checkActiveId:0,
    isNumber:true,
    isSame:true
  };
  },
  computed: {},
  watch: {},
  methods: {
    cancel(){
      this.password.forEach(item=>item.pwd = '')
      this.checkPassword.forEach(item=>item.pwd = '')
    },
    enter(){
      this.checkPassword.map((n) => n.pwd).join("") === this.password.map((n) => n.pwd).join("")? this.isSame = true : this.isSame = false; 
      this.isSame?this.$emit("enter", this.password.map((n) => n.pwd).join("")):''
    },
    //聚焦
    showFocus(index,flag){
      // console.log('index',index,'flag',flag)
      switch(flag){
        case 'password' : if(index !== this.activeId && this.$refs.pwd[this.activeId])this.$refs.pwd[index].focus();
        break;
        case 'checkpassword' : if(index !== this.checkActiveId && this.$refs.checkPwd[this.checkActiveId])this.$refs.checkPwd[index].focus();
        break;
      }
      
    },
    //keydown
    inputDirection(index,flag){
      // console.log('index',index,'el',event)
      const e = event
      switch(flag){
        case 'password' : if(e.keyCode === 8 && this.password[index].pwd == ''){
                            index-1>=0?this.$refs.pwd[index -1].focus():this.$refs.pwd[index].focus()
                          }else if(e.keyCode !== 8 && this.password[index].pwd !== ''){
                            index+1<=5?this.$refs.pwd[index + 1].focus():''
                          };
        break;
        case 'checkpassword' : if(e.keyCode === 8 && this.checkPassword[index].pwd == ''){
                                 index-1>=0?this.$refs.checkPwd[index -1].focus():this.$refs.checkPwd[index].focus()
                               }else if(e.keyCode !== 8 && this.checkPassword[index].pwd !== ''){
                                 index+1<=5?this.$refs.checkPwd[index + 1].focus():''
                               };
        break;
      }
      
      // this.$refs.pwd[index].value?this.$refs.pwd[index + 1].focus():this.$refs.pwd[index].focus()
      
    },

    inputFinash(index,flag){
      console.log('index',index,'flag',flag)
      const reg = /[0-9]/g
      switch(flag){
        case 'password' : this.activeId = this.password[index].pwd ? index + 1 : index - 1;
                          const pwd = this.$refs.pwd[this.activeId];
                          if (pwd) pwd.focus();
                          if (index == this.password.length - 1) {
                            let enterPassword = this.password.map((n) => n.pwd).join('');
                              // console.log('password',enterPassword,typeof(enterPassword))
                            if (this.password.length == 6) {
                              const code = Number(enterPassword)
                              // console.log(code,reg.test(code))
                              reg.test(code)?this.isNumber = true : this.isNumber = false
                            }
                          };
        break;
        case 'checkpassword' : this.checkActiveId = this.checkPassword[index].pwd ? index + 1 : index - 1;
                               const checkPwd = this.$refs.checkPwd[this.checkActiveId];
                               if (checkPwd) checkPwd.focus();
                               if (index == this.checkPassword.length - 1) {
                                 let enterPassword = this.checkPassword.map((n) => n.pwd).join("");
                                 if (enterPassword.length == 6) {
                                   console.log('password',enterPassword)
                                   enterPassword === this.password.map((n) => n.pwd).join("")? this.isSame = true : this.isSame = false; 
                                  //  this.isSame?this.$emit("enter", enterPassword):''
                                 }
                               };
        break;
      }
    },
      
      
  },
  created() {

  },
  mounted() {

  },
}
</script>
<style  lang='scss' scoped>
.warp{
  .container{
    background: #fff;
    .setpwd{
      width: 648px;
      margin: 0 auto;
      .label-tit{
        padding: 16px 0;
      }
      .password{
        width: 60px;
        height: 60px;
        margin-left:40px ;
        text-align: center;
      }
    }
    .checkpwd{
      width: 648px;
      margin: 0 auto;
      .label-tit{
        padding: 16px;
      }
      .checkpassword{
        width: 60px;
        height: 60px;
        margin-left:40px ;
        text-align: center;
        content: '*';
      }
    } 
    .tip{
      color: red;
      padding: 10px 0;
    } 
    .footer{
      width: 648px;
      margin: 0 auto;
      padding: 20px 0;
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      button{
        width: 100px;
        height: 40px;
        background: #fff;
        outline: none;
        border: 1px solid #999;
      }
      .cancel{
        margin-right: 40px;
      }
      .enter{
        &:hover{
          color: royalblue;
          border:1px solid royalblue;
        }
        &:focus{
          color: royalblue;
          border:1px solid royalblue;
        }
        &:visited{
          color: royalblue;
          border:1px solid royalblue;
        }
      }
      
    }
  }
}
</style>

效果：

非数值校验：

值不一致校验：

隐藏密码 将 input中 type 属性改为 password