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


Posted in Vue.js onMarch 25, 2022

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.js 相关文章推荐
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
Vue 的 v-model用法实例
Nov 23 Vue.js
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 #Vue.js
一起来看看Vue的核心原理剖析
Mar 24 #Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 #Vue.js
关于Vue中的options选项
Mar 22 #Vue.js
vue+echarts实现多条折线图
vue使用echarts实现折线图
浅谈Vue的computed计算属性
You might like
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
php实现评论回复删除功能
2017/05/23 PHP
javascript 函数调用规则
2009/08/26 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
Python 私有函数的实例详解
2017/09/11 Python
Python探索之修改Python搜索路径
2017/10/25 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
Python 创建守护进程的示例
2020/09/29 Python
python collections模块的使用
2020/10/16 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
厨师岗位职责
2013/11/12 职场文书
党员党性分析材料
2014/02/17 职场文书
工程采购员岗位职责
2014/03/09 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
党支部先进事迹材料
2014/12/24 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
项目投资意向书范本
2015/05/09 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书