vue3实现6位数验证码自动聚焦编辑效果

如图所示

不多bb直接上代码 

页面代码

<template>
    <div class="input-box">
        <div class="code-item" :class="codeValue.length == 0 && inputFocus ? 'code-item-active' : ''">{{ codeValue[0] }}
        </div>
        <div class="code-item" :class="codeValue.length == 1 && inputFocus ? 'code-item-active' : ''">{{ codeValue[1] }}
        </div>
        <div class="code-item" :class="codeValue.length == 2 && inputFocus ? 'code-item-active' : ''">{{ codeValue[2] }}
        </div>
        <div class="code-item" :class="codeValue.length == 3 && inputFocus ? 'code-item-active' : ''">{{ codeValue[3] }}
        </div>
        <div class="code-item" :class="codeValue.length == 4 && inputFocus ? 'code-item-active' : ''">{{ codeValue[4] }}
        </div>
        <div class="code-item" :class="codeValue.length >= 5 && inputFocus ? 'code-item-active' : ''">{{ codeValue[5] }}
        </div>
        <input class="input-code" v-model="codeValue" :maxlength="6" type="tel" @blur="codeInputBlur"
            @focus="codeInputFocus" @input="codeInputChange" />
    </div>
</template>

ts代码

<script lang='ts' setup>
import { onMounted, ref, Ref } from "vue";
let time: Ref<number> = ref(0)
let codeValue: Ref<string> = ref('')
let inputFocus: Ref<boolean> = ref(false)
onMounted(() => {
    getVerifyCode()
})
// 获取验证码
const getVerifyCode = () => {
    time.value = 120;
    const timer = setInterval(() => {
        time.value--;
        if (time.value <= 0) {
            time.value = 0;
            clearInterval(timer);
        }
    }, 1000);
};
// 验证码输入框input
const codeInputChange = () => {
    if (codeValue.value && codeValue.value.length >= 6) {
        // do soming...
    }
}
// 验证码输入框失去焦点
const codeInputBlur = () => {
    inputFocus.value = false;
}
// 验证码输入框获取到焦点
const codeInputFocus = () => {
    inputFocus.value = true;
}
</script>

css代码

<style lang="scss" scoped>
.input-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 80px;
    position: relative;
    padding: 0px 15px;
    box-sizing: border-box;

    .input-code {
        width: 100%;
        height: 50px;
        position: absolute;
        left: 0px;
        top: 0px;
        box-sizing: border-box;
        color: transparent;
        background-color: transparent;
        opacity: 0;
    }

    .code-item {
        width: 40px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border: 1px solid#D8D8D8;
        margin-right: 10px;
        color: #444;
        font-size: 34px;
    }

    .code-item-active {
        border-bottom: 1px solid#F23026;
    }
}
</style>