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

完美前端 / 2023-07-27 / 原文

使用一个输入框来获取数据，再用一组div来展示数据

用一个input 遮在展示内容的框上，给input设置opacity：0，用户每次输入的值拿到后依次展示在框内，如果用户输入或者删除就直接体现在展示框上了。

页面内容：

<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 type="text" class="list-input" maxlength="6" v-model="data.value" ></li>
</ul>

js内容：

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

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{
  &.active{
  border-color:#03A6A0;
  }
  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;
}