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 相关文章推荐
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 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
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
php Ubb代码编辑器函数代码
2012/07/05 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
PHP中echo和print的区别
2014/08/28 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
Python中str.join()简单用法示例
2018/03/20 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
联想中国官方商城:Lenovo China
2017/10/18 全球购物
Exception类的常用方法
2012/06/16 面试题
社会稳定风险评估方案
2014/06/02 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
放弃继承权公证书
2015/01/23 职场文书
师德承诺书2015
2015/04/28 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
《灰雀》教学反思
2016/02/19 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
详解Python描述符的工作原理
2021/06/11 Python
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server