vue實現移動端多格輸入框(h5頁面多格輸入)
阿新 • • 發佈:2018-12-28
近來公司提出需求,完成如下圖h5頁面操作。
網上沒什麼輪子可以使用,就自己徒手擼了一個。不多廢話,直接上程式碼。
<div class="verify-tel">
<h1>簡訊驗證</h1>
<h2>SMS Verification</h2>
<div>
<input ref="pwd" :maxlength="digits.length" v-model="msg" style="position: absolute;z-index: -1;opacity: 0" />
<ul class="pwd-wrap" @click="focus">
<li v-for="(item,key) in digits" :style="{'margin-right': (100-10*digits.length)/(digits.length-1)+'%','width':'10%'}" >
<span v-if="msgLength > key">{{msg.substring(key,key+1)}}</span>
</li >
</ul>
</div>
</div>
css部分(樣式內容過於繁瑣,請自行省去修改)
html,body{
width: 100%;
height: 100%;
background: #fbf9fe;
}
.verify-tel{
background-color: #f9f9f9;
margin: 0 30px;
>p{
color: red;
font-weight: bold;
margin-top: 40px;
margin-bottom : 30px;
}
>h1{
font-weight: 400;
margin-bottom: 0;
}
>h2{
margin-top: 0;
font-weight: 400;
font-size: 14px;
color: #858585;
}
.input-box{
margin-top: 30px;
>input{
width: 10%;
border: none;
border-bottom: 1px solid grey;
background-color: #f9f9f9;
text-align: center;
margin-right: 18%;
font-size: 35px;
&:focus{
border-bottom: 1px solid deepskyblue;
}
&:last-of-type{
margin-right: 0 !important;
}
}
}
.btn-box{
>button{
height: 40px;
border: 1px solid #4e8cee;
color: #4e8cee;
background-color: white;
border-radius: 4px;
width: 30%;
&:last-of-type{
float: right;
width: 65%;
height: 40px;
color: white;
background-color: rgb(78,140,238);
border-radius: 4px;
}
}
}
}
.pwd-wrap{
padding-left: 0;
width: 100%;
height: 44px;
padding-bottom: 1px;
margin: 0 auto;
display: flex;
display: -webkit-box;
display: -webkit-flex;
cursor: pointer;
border: none;
background-color: #f9f9f9;
}
.pwd-wrap li{
list-style-type:none;
text-align: center;
line-height: 44px;
-webkit-box-flex: 1;
flex: 1;
-webkit-flex: 1;
border: none;
border-bottom:1px solid black;
background-color: #f9f9f9;
&:last-of-type{
margin-right: 0 !important;
}
>span{
font-size: 20px;
}
}
.pwd-wrap li:last-child{
border-right: 0;
}
.pwd-wrap li i{
height: 10px;
width: 10px;
border-radius:50% ;
background: #000;
display: inline-block;
}
js部分程式碼
<script>
export default{
data(){
return {
page:0, //1為簡訊驗證
digits:['','','','','',''], //input框位數控制,這裡可以配置多少個“輸入框”
msg:'',
msgLength:0,
}
},
methods:{
//手機號碼驗證介面函式
verifyTels:async function () {
try{
}catch(e){
console.log(e)
}
},
//使input框獲得焦點
focus(){
this.$refs.pwd.focus();
},
},
beforeMount:function () {
//這裡因為我的業務需求存在多個page,且digits由父元件傳輸過來,故我隱去,只剩下一句程式碼。
this.page=1;
},
watch: {
msg(curVal){
//監聽輸入的長度,如果輸入完,自動呼叫校驗介面函式
if(curVal.trim().length===this.digits.length){
this.verifyTels();
}
this.msgLength = curVal.length;
},
'page':{
handler:function (newValue, oldValue) {
if(oldValue==0&&newValue==1){
//第一次進入頁面,自動獲得焦點,這裡可優化。
this.timer = setTimeout(()=>{this.$refs.pwd.focus()},500);
}
},
deep:true
}
},
beforeDestroy:function () {
clearTimeout(this.timer);
}
}
</script>
如果有問題,聯絡本人修改。方便大家使用