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实现简单购物车功能
Dec 13 Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
php is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
PHP中集成PayPal标准支付的实现方法分享
2012/02/06 PHP
php5.3 注意事项说明
2013/07/01 PHP
php实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
一些javascript一些题目的解析
2010/12/25 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
Vue基础配置讲解
2019/11/29 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
python创建临时文件夹的方法
2015/07/06 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
基于python的Paxos算法实现
2019/07/03 Python
python gdal安装与简单使用
2019/08/01 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
python实现简单井字棋游戏
2020/03/04 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
母亲节感恩活动记录
2014/03/16 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL