六位校验框 - vue版

项目需要些一个六位校验码，网上了找了大多都是jQuery版本的，自己改成vue版的了。
效果图：

代码：

<template>
    <div class="val-box" id="val-box" @click="handleInputClick">
        <input ref="valCodeInput" id="val-code-input" v-model="verifyCode" type="text" maxlength="6" @keyup="checkNumKeyup"  onselectstart="return false;" @blur="checkNumBlur" @focus="checkNumFocus" />
        <div name="val-item" :class="[{'available':isFocus}]">{{verifyCode.length>0?verifyCode.substring(0,1):''}}</div>
        <div name="val-item" :class="[{'available':verifyCode.length>0&&isFocus}]">{{verifyCode.length>1?verifyCode.substring(1,2):''}}</div>
        <div name="val-item" :class="[{'available':verifyCode.length>1&&isFocus}]">{{verifyCode.length>2?verifyCode.substring(2,3):''}}</div>
        <div name="val-item" :class="[{'available':verifyCode.length>2&&isFocus}]">{{verifyCode.length>3?verifyCode.substring(3,4):''}}</div>
        <div name="val-item" :class="[{'available':verifyCode.length>3&&isFocus}]">{{verifyCode.length>4?verifyCode.substring(4,5):''}}</div>
        <div name="val-item" :class="[{'available':verifyCode.length>4&&isFocus}]">{{verifyCode.length>5?verifyCode.substring(5,6):''}}</div>
    </div>
</template>
<script type="text/javascript">
export default {
    name: "login",
    data() {
        return {
        verifyCode: "",
        isFocus: false,
        valVerify: true
        };
    },
    methods: {
        handleInputClick() {
            this.$refs.valCodeInput.focus();
        },
        checkNumKeyup() {
            if(this.verifyCode.length>5) {
                this.loginIn();
            }
        },
        checkNumBlur() {
            this.isFocus = false;
        },
        checkNumFocus() {
            this.isFocus = true;
        },
    },
    mounted() {
        this.$refs.valCodeInput.focus();
        this.isFocus = true;
    }
};
</script>
<style scoped>
    .val-box {
        margin: 200px auto 0;
        height: 40px;
        width: 216px;
        text-align: center;
        position: relative;
        background: #FFFFFF;
    }

    .val-box input[type=text] {
        position: absolute;
        left: 0;
        top: 0;
        height: 34px;
        width: 212px;
        opacity: 0.9;
        z-index: -999;
        outline: none;
    }

    .val-box div {
        height: 34px;
        width: 28px;
        border: 1px solid #DDD;
        border-radius: 5px;
        float: left;
        margin: 2px 3px;
        z-index: 5;
        font-size: 1.5em;
        font-family: arial;
        font-weight: 530;
        text-align: center;
        line-height: 1.5em;
        cursor: text;
    }
    .val-box .available {
        border-color: #0081db;
    }
</style>

参考链接：https://blog.csdn.net/fooooooood/article/details/81322711