vue框架
效果展示
html
<ul class="lists" ref="inputs">
<li class="list" :class="{ active: smsCode[0] }">{{ smsCode[0] }}</li>
<li class="list" :class="{ active: smsCode[1] }">{{ smsCode[1] }}</li>
<li class="list" :class="{ active: smsCode[2] }">{{ smsCode[2] }}</li>
<li class="list" :class="{ active: smsCode[3] }">{{ smsCode[3] }}</li>
<li class="list" :class="{ active: smsCode[4] }">{{ smsCode[4] }}</li>
<li class="list" :class="{ active: smsCode[5] }">{{ smsCode[5] }}</li>
<!-- 覆盖在li上面的的input, 点击li实则是在进行input输入-->
<li><input type="text" :oninput="(smsCode = smsCode.replace(/[^0-9.]/g, ''))" class="list-input" maxlength="6" v-model="smsCode" /></li>
</ul>
js
data() {
return {
smsCode: '',
}
}
css
.lists {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
margin-bottom: 40px;
}
.list-input {
position: absolute;
left: 0;
top: 0;
height: 47px;
width: 100%;
opacity: 0;
}
.list {
width: 47px;
height: 47px;
line-height: 47px;
font-size: 16px;
border: 1px solid #ededee;
border-top: 0px;
border-left: 0px;
border-right: 0px;
text-align: center;
}
.list.active {
border-color: #ededee;
}