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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。