如图所示
不多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>