vue實現移動端多格輸入框
阿新 • • 發佈:2021-10-21
近來公司提出需求,完成如下圖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>
部分(樣式內容過於繁瑣,請自行省去修改)
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; colooIKFPRVQVr: #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-colhttp://www.cppcns.comor: #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 blachttp://www.cppcns.comk; 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; }
部分程式碼
<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();
www.cppcns.com }
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>
如果有問題,聯絡本人修改。方便大家使用
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。