vue+iview如何实现手机号分段输入框
导读：本文共2106字符，通常情况下阅读需要7分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 具体内容如下<template><div:class="{'ivu-form-item-error':!valid&&dirty&&validated}"><divclass="ivu-phone-inputivu-selectivu-select-m... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。具体内容如下
<template><div:class="{'ivu-form-item-error':!valid&&dirty&&validated}"><divclass="ivu-phone-inputivu-selectivu-select-multipleivu-select-default"@keydown.delete.prevent@click.stop><inputtype="text"class="ivu-select-selectionnumber-block"v-for="(item,index)inphoneLength":key="index":ref="numberRefName+index"@focus="handlerFocus"@input="handlerInput($event,index)"@keydown.delete.prevent="deleteNumber($event,index)"@keydown.left.prevent="changeInput(index-1)"@keydown.right="changeInput(index+1)"/><Icontype="ios-close-circle"class="clean-btn"@click="cleanValue"/></div></div></template><script>exportdefault{data(){return{required:this.$attrs.hasOwnProperty('required'),phoneLength:11,phoneReg:/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,numberRefName:'numberBlock',validTimer:null,dirty:false,valid:false,validated:false,};},methods:{handlerFocus(){if(!this.dirty){this.dirty=this.required?true:false;}},handlerInput(e,index){if(!e.target.value){return;}this.dirty=true;letvalue=e.target.value.replace(/\D+/g,'');value=value?value[0]:'';//合法值，切换下一个输入框if(value.length){this.changeInput(index+1);}//#ende.target.value=value;this.debounceValidate();},changeInput(index){if(index<0||index===this.phoneLength)return;consttarget=this.$refs[this.numberRefName+index][0];target.focus();if(target.value&&target.setSelectionRange){target.setSelectionRange(1,1);//maxlength="1"时无效，所以去掉了...}},deleteNumber(e,index){if(e.target.value){e.target.value=''}else{this.changeInput(index-1);}},resetStatus(){this.validated=false;this.dirty=false;},cleanValue(){this.resetStatus();constnumberBlocks=this.$refs;for(letiinnumberBlocks){numberBlocks[i][0].value='';}if(this.required){constFormItem=this.getFormItem();if(FormItem){FormItem.resetField();FormItem.$emit('on-form-change',null);}}//this.changeInput(0);},debounceValidate(){this.validTimer=setTimeout(()=>{this.validate();},300);},validate(isLeave){constnumberBlocks=this.$refs;letresult='';for(letiinnumberBlocks){result+=numberBlocks[i][0].value;}if(result.length===this.phoneLength||isLeave){this.validated=true;this.dispath({value:result,valid:this.valid=this.phoneReg.test(result),});}},dispath(info){this.$emit('input',info.valid?info.value:'');if(this.required){constFormItem=this.getFormItem();if(FormItem){this.updateFormItem(FormItem,info.valid?info.value:'');}}},getFormItem(){letMAX_LEVEL=3;letparent=this.$parent;letname=parent.$options.name;while(MAX_LEVEL&&name!=='FormItem'){MAX_LEVEL--;if(!parent)returnnull;parent=parent.$parent;}returnparent||null;},updateFormItem(FormItem,data){FormItem.$emit('on-form-change',data);},pageEvent(){if(this.dirty){this.validate(true);}},},created(){window.addEventListener('click',this.pageEvent);},beforeDestroy(){window.removeEventListener('click',this.pageEvent);},};</script><stylescopedlang="less">.ivu-phone-input{.clean-btn{transition:opacity.5s;opacity:0;cursor:pointer;}&:hover{.clean-btn{opacity:1;}}}.number-block{display:inline-block;padding:0;height:30px;width:28px;text-align:center;margin-right:2px;&:nth-child(3){margin-right:10px;}&:nth-child(7){margin-right:10px;}}</style> </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
vue+iview如何实现手机号分段输入框的详细内容，希望对您有所帮助，信息来源于网络。