<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] : '';
? ? ? ? //合法值，切換下一個(gè)輸入框
? ? ? ? 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" 時(shí)無(wú)效，所以去掉了...
? ? ? ? }
? ? ? },
? ? ? 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>