乘风原创程序

  • vue+iview实现手机号分段输入框
  • 2022/3/25 15:36:57
  • 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>