vue+iview如何实现手机号分段输入框

这篇文章主要讲解了“vue+iview如何实现手机号分段输入框”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue+iview如何实现手机号分段输入框”吧！

具体内容如下

<template>  <div :class="{'ivu-form-item-error':!valid && dirty && validated}">    <div class="ivu-phone-input ivu-select  ivu-select-multiple ivu-select-default" @keydown.delete.prevent @click.stop>      <input type="text" class="ivu-select-selection number-block"             v-for="(item,index) in phoneLength" :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)"      />      <Icon type="ios-close-circle" class="clean-btn" @click="cleanValue"/>    </div>  </div></template> <script>  export default {    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;        let value = e.target.value.replace(/\D+/g, '');        value = value ? value[0] : '';        //合法值，切换下一个输入框        if (value.length) {          this.changeInput(index + 1);        }        //#end        e.target.value = value;        this.debounceValidate();      },      changeInput(index) {        if (index < 0 || index === this.phoneLength) return;        const target = 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();        const numberBlocks = this.$refs;        for (let i in numberBlocks) {          numberBlocks[i][0].value = '';        }        if (this.required) {          const FormItem = this.getFormItem();          if (FormItem) {            FormItem.resetField();            FormItem.$emit('on-form-change', null);          }        }        // this.changeInput(0);      },      debounceValidate() {        this.validTimer = setTimeout(() => {          this.validate();        }, 300);      },      validate(isLeave) {        const numberBlocks = this.$refs;        let result = '';        for (let i in numberBlocks) {          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) {          const FormItem = this.getFormItem();          if (FormItem) {            this.updateFormItem(FormItem, info.valid ? info.value : '');          }        }      },      getFormItem() {        let MAX_LEVEL = 3;        let parent = this.$parent;        let name = parent.$options.name;        while (MAX_LEVEL && name !== 'FormItem') {          MAX_LEVEL--;          if (!parent) return null;          parent = parent.$parent;        }        return parent || 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> <style scoped lang="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>

感谢各位的阅读，以上就是“vue+iview如何实现手机号分段输入框”的内容了，经过本文的学习后，相信大家对vue+iview如何实现手机号分段输入框这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！