<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>