<template>
    <div class="wrapper">
      <div class="wrapper-input">
        <h3>请输入12位奖品兑换码</h3>
        <ul>
          <li>
            <input type="text" class="oInput" maxlength="1">
            <input type="text" class="oInput" maxlength="1">
            <input type="text" class="oInput" maxlength="1">
            <input type="text" class="oInput" maxlength="1">
            <span></span>
          </li>
          <li>
            <input type="text" class="oInput" maxlength="1">
            <input type="text" class="oInput" maxlength="1">
            <input type="text" class="oInput" maxlength="1">
            <input type="text" class="oInput" maxlength="1">
            <span></span>
          </li>
          <li>
            <input type="text" class="oInput" maxlength="1">
            <input type="text" class="oInput" maxlength="1">
            <input type="text" class="oInput" maxlength="1">
            <input type="text" class="oInput" maxlength="1">
          </li>
        </ul>
        <div class="hint">{{hintTxt}}</div>
      </div>
      <div class="margins"></div>
      <span class="wrapper-btn" @click="expiry">兑奖</span>
      <div class="succes-wrapper" v-if="successAlert">
        <div>
          <h2>奖品兑换成功</h2>
          <h3>获赠礼品为</h3>
          <p>{{prizeName}}</p>
          <span @click="successAlert = false">确定</span>
        </div>
      </div>
    </div>
</template>
<script>
export default {
     methods: {
      setInput () {
        this.$nextTick(() => {
          let reg = /^[0-9a-zA-Z]+$/;
          let self = this;
          let oInput = document.getElementsByClassName('oInput');
          for (let i = 0; i < oInput.length; i++) {
            (() => {
              oInput[i].oninput = () => {
                if (oInput[i].value !== '') {
                  if (!reg.test(oInput[i].value)) {
                    oInput[i].setAttribute('class', 'oInput error');
                    // self.$store.commit('popSet', {tips: '兑换码只能为数字或字母', status: 1, time: 1500});
                    self.hintTxt = '兑换码只能为数字或字母';
                  } else {
                    self.hintTxt = '';
                    oInput[i].setAttribute('class', 'oInput');
                    if (oInput[i + 1]) {
                      oInput[i + 1].focus();
                    }
                  }
                }
              };
            })(i);
          };
        });
      },
     expiry () {
        if (this.hintTxt === '') {
          let oInput = document.getElementsByClassName('oInput');
          for (let i = 0; i < oInput.length; i++) {
            if (oInput[i].value === '') {
              //  this.$store.commit('popSet', {tips: '请填写完整的兑换码', status: 1, time: 1500});
              this.hintTxt = '请填写完整的兑换码';
              return;
            }
          }
          let text = '';
          for (let i = 0; i < oInput.length; i++) {
            text += oInput[i].value;
          }
        }
      }
    }
}
</script>

基本思路 

效果如下图