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; }