模仿支付时的6格输入框

实现思路：

（1）设置一个上层input,用于输入内容；
（2）设置一个下层div，里面放置6个input，用于显示（上层input的）内容；
（3）上层input宽度要远远大于父元素宽度，并且绝对定位的left要较大（隐藏上层input的内容），背景设置为透明( background-color : )。

代码实现：

  html:

 <div class="ipt">
            <input  class="area" ref="code" v-model="code" @input="inputing" maxlength="6"/>
            <div class="grid" id="grid">
                <input class="my_input" disabled  :value="code.length>0?code[0]:''"></input>
                <input class="my_input" disabled  :value="code.length>1?code[1]:''"></input>
                <input class="my_input" disabled  :value="code.length>2?code[2]:''"></input>
                <input class="my_input" disabled  :value="code.length>3?code[3]:''"></input>
                <input class="my_input" disabled  :value="code.length>4?code[4]:''"></input>
                <input class="my_input" disabled  :value="code.length>5?code[5]:''"></input>
            </div>
        </div>

  js:

       data(){
           return{
               code: ""
           }
        },
        methods:{
            inputing: function () {
                this.code = this.code.replace(/[^\dA-Za-z]/g, '').toLocaleUpperCase();  //监听input事件，设置规则       
            },
        }

  css:

.ipt{
         position: relative;
         width: 249px;
         height: 40px;
         margin:135px auto 0 auto;
         border-radius: 5px;
         overflow: hidden;
      }
     .ipt input.area{
         width: 500%;
         height: 40px;
         font-size: 15px;

         position: absolute;
         left: -900px;
         z-index: 1;
         background-color: transparent;
     }
    .grid {
        display: flex;
        flex-direction: row;
        height: 40px;
        border-radius: 8px;
        border: 1px solid #999999;
    }
    .grid .my_input{
        width: 0;   //需要设置为 0,
        flex: 1;

       height: 40px;
       border-right: 1px solid  #999999;
       font-size: 20px;
       text-align: center;
       line-height: 40px;
       background-color: transparent;
    }
    .grid .my_input:last-child{
        border-right: none;
    }

注意：

1.input 是有默认宽度的，要想通过flex = 1 达到自适应布局，必须先把input的宽度设置为0。即：

{  
   width：0 ； //重点！！！
   flex : 1 ;
}