移动端 pc端验证码输入框样式

在input上放置6个span，每个span对应的就是input的顺序输入值，把input的opacity设置为0即可。下面贴上代码：

HTML :

 <div class="codeNum">
      <span>{{code[0]}}</span>
      <span>{{code[1]}}</span>
      <span>{{code[2]}}</span>
      <span>{{code[3]}}</span>
      <span>{{code[4]}}</span>
      <span>{{code[5]}}</span>
      <input type="text" maxlength="6" v-model="code">
 </div>

CSS：

.codeNum {
      height: 2rem;
      width: 73%;
      margin: 0 auto;
      position: relative;
      text-align: left;
      > span {
        border-bottom: 1px solid #ff566b;
        display: inline-block;
        width: 1rem;
        height: 1.5rem;
        margin-left: .5rem;
        text-align: center;
        vertical-align: middle;
        &:first-child{
          margin-left: 0;
        }
      }
      > input {
        position: absolute;
        width: 100%;
        letter-spacing: 1.3rem;
        padding-left: 0.3rem;
        color: #fff;
        opacity: 0;
        left: 0;
        height: 100%;
      }

JS :

export default {
  data() {
    return {
           code: []
    };
  },
}