vue3 实现移动端h5多个输入框填入验证码功能（非常简单）

 

完整的代码, 可以复制引用

效果

 

 

页面内容

<ul class="lists" ref="inputs">
    <li class="list" :class="{active: data.value[0]}">{{data.value[0]}}</li>
    <li class="list" :class="{active: data.value[1]}">{{data.value[1]}}</li>
    <li class="list" :class="{active: data.value[2]}">{{data.value[2]}}</li>
    <li class="list" :class="{active: data.value[3]}">{{data.value[3]}}</li>
    <li class="list" :class="{active: data.value[4]}">{{data.value[4]}}</li>
    <li class="list" :class="{active: data.value[5]}">{{data.value[5]}}</li>
<!--    覆盖在li上面的的input, 点击li实则是在进行input输入-->
    <li><input type="text" class="list-input" maxlength="6" v-model="data.value" ></li>
</ul>

JavaScript内容

let data = reactive({
    value: '123'
})

CSS内容

.lists {
    padding-top: .2rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
}

.list-input {
    position: absolute;
    left: 0;
    top: 0;
    height: 1.4rem;
    width: 100%;
    opacity: 0;
}

.list {
    width: .9rem;
    height: 1.1rem;
    line-height: 1.1rem;
    font-size: .75rem;
    font-weight: bold;
    background: #E6F7F7;
    border-radius: .2rem;
    border: .02rem solid transparent;
    text-align: center;
}

.list.active {
    border-color: #03A6A0;
}