Vue版支付密码（类似支付宝）

Vue版支付密码代码

效果展示

HTML

<div class="spend-pay-1">
    <div class="spend-pay-2">支付密码div>
    
    <div class='am_payPwd' :id="`ids_${id}`">
        <input type="password"
         autocomplete="new-password"  
         maxlength="1"
         @input="changeInput"
         @click="changePwd"
         v-model="pwdList[i]"
         @keyup="keyUp($event)"
         @keydown="oldPwdList = pwdList.length"
         class="shortInput"
         v-for="(v, i) in 6" :key="i">
    div>   
    
    
div>
<div>
    <div class="spend-pay-3">请输入6位数字支付密码div>
    <div class="spend-pay-4">忘记密码？div>
div>
<div class="spend-pay-5">
    <el-button class="spend-pay-button" type="primary" round >
    去支付
    el-button>
div>

Javascript

export default {
  data () {
    return {
      //支付框
      pwdList: [],
      oldPwdList: [],
      isDelete: false,
      ipt: '',
      //结束
    };
  },
  //支付框
  props: {
    id: String, // 当一个页面有多个密码输入框时，用id来区分
    default: '1'
  },
  //结束
  mounted () {　
    //支付框　
    this.ipt = document.querySelectorAll(`#ids_${this.id} .shortInput`)
  },
  methods: {
    //   支付框
    keyUp (ev) {
      let index = this.pwdList.length
      if (!index) return
      if (ev.keyCode === 8) {
        this.isDelete = true
        if (this.oldPwdList === this.pwdList.length) {
          if (index === this.pwdList.length) {
            this.pwdList.pop()
          }
          index--
        } else {
          index > 0 && index--
        }
        this.ipt[index].focus()
      } else if (this.isDelete && index === this.pwdList.length && /^\d$/.test(ev.key)) {
        this.isDelete = false
        this.pwdList.pop()
        this.pwdList.push(ev.key)
        this.ipt[this.pwdList.length] && this.ipt[this.pwdList.length].focus()
      }
      this.$emit('getPwd', this.pwdList.join(''))
    },
    //支付框
    changePwd () {
      let index = this.pwdList.length
      index === 6 && index--
      this.ipt[index].focus()
    },
    //支付框
    changeInput () {
      let index = this.pwdList.length
      let val = this.pwdList[index - 1]
    　　   if (!/[0-9]/.test(val)) {　
        this.pwdList.pop() 　　　　  　　　　 
        return 　　　 　　
      }
      if (!val) {
        this.pwdList.pop()
        index--
        if (index > 0) this.ipt[index - 1].focus()
      } else {
        if (index < 6) this.ipt[index].focus()
      }
    }
  }
}

CSS

  /* 支付框样式 */
    .am_payPwd {
        display: inline-block;
        margin-left: 70px;   
        width: 300px;
        height: 50px;
    
    }
    /* 支付框样式 */
    .shortInput {
        background: #cccccc;
        border: 0;
        text-align: center;
        font-size: 20px;
        float: left;
        width: 40px;
        height: 40px;
        color: #333;
        outline: #ff0067;
    }
    /* 支付框样式 */
    .shortInput:not(:last-child) {
        margin-right: 10px;
    }
    .spend-pay-button{
        margin: 20px auto 20px 70px;
    }
       .spend-pay-1{
        margin-top: 4%;
        position: relative;
    }
    .spend-pay-2{
        font-size: 14px;
        font-weight:550;
        display: inline-block;
        position: absolute;
        top:0;
    }
    .spend-pay-3{
        margin-left: 70px;
        display: inline-block;
        font-size: 10px;
        color: #cccccc; 
    }
    .spend-pay-4{
        margin-left: 85px;
        display: inline-block;
        font-size: 10px;
        font-weight: 600;
    }
      /* 去支付按钮样式 */
    .spend-pay-5 .el-button--medium {
        padding: 10px 35px;
        border-radius: 17px;
    }

代码大概就是这样子了