短信验证码输入框效果

H5界面实现验证码校验（4位数6位数均可自定义）
如图

image.png

思路是：把输入框定位到屏幕外，用label标签的for指向输入框，这样点击label就可以调起键盘进行输入。label显示的内容是输入框输入的单个文字。再根据输入个数，给label添加一个鼠标跳动的动画就可以了。
html:

        <div id="code" class="code"> 
          
          <div class="v-code">
            <input
                ref="vcode"
                id="vcode"
                type="tel"
                maxlength="4"
                v-model="code"
                @focus="focused = true"
                @blur="focused = false">
         
            <label
                for="vcode"
                class="line"
                v-for="(item,index) in codeLength"
                        :key="index"
                :class="{'animated': focused && cursorIndex === index}"
                v-text="codeArr[index]"
            >
            </label>
          </div>
        </div>

css:

                 .code {
                       padding-left: 10px;
                       padding-right: 20px;
                       padding-top: 60px;
                       margin-left: 80px;
                      margin-top: 50px;
                      width: 750px;
                     }
                     .heading-2 {
                       color: #333333;
                     }
                     .v-code {
                       margin-top: 20px;
                       display: -webkit-box;
                       display: -ms-flexbox;
                       display: flex;
                       -webkit-box-pack: justify;
                       -ms-flex-pack: justify;
                       justify-content: space-between;
                       -webkit-box-align: center;
                       -ms-flex-align: center;
                       align-items: center;
                       position: relative;
                         
                     }
                     .v-code input {
                       position: absolute;
                        
                       opacity:0;
                     }
                     .v-code .line {
                       position: relative;
                       width: 130px;
                       height: 80px;
                       line-height: 50px;
                       text-align: center;
                       font-size: 40px;
                     }
                     .v-code .line::after {
                       display: block;
                       position: absolute;
                       content: '';
                       left: 0;
                       width: 100%;
                       bottom: 0;
                       height: 1px;
                       background-color: #333333;
                       transform: scaleY(.5);
                       transform-origin: 0 100%;
                     }
                     .v-code .line.animated::before {
                       display: block;
                       position: absolute;
                       left: 50%;
                       top: 20%;
                       width: 1px;
                       height: 60%;
                       content: '';
                       background-color: #333333;
                       animation-name: coruscate;
                       animation-duration: 1s;
                       animation-iteration-count: infinite;
                       animation-fill-mode: both;
                     }
                     @keyframes coruscate {
                       0% {
                         opacity: 0
                       }
                       25% {
                         opacity: 0
                       }
                       50% {
                         opacity: 1
                       }
                       75% {
                         opacity: 1
                       }
                       to {
                         opacity: 0
                       }
                     }

js:

    var app = new Vue({
                el: '#code',
                data: {
                    code: '',
                    codeLength: 4,
                    focused: false
                },
                computed: {
                    codeArr() {
                        return this.code.split('')
                    },
                    cursorIndex() {
                        return this.code.length
                    }
                },
                watch: {
                    code(newVal) {
                        this.code = newVal.replace(/[^\d]/g, '')
                        if (newVal.length > 3) {
                            this.$refs.vcode.blur()
                            setTimeout(() => {
                                alert(`vcode: ${this.code}`) ;
                            }, 500)
                        }
                    }
                }, 
            })