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 25 Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
Vue Element plus使用方法梳理
Dec 24 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
php创建session的方法实例详解
2015/01/27 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
jquery插件制作教程 txtHover
2012/08/17 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
工程项目建议书范文
2014/03/12 职场文书
美术指导求职信
2014/03/17 职场文书
教室布置标语
2014/06/26 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
后勤工作个人总结
2015/02/28 职场文书
法院个人总结
2015/03/03 职场文书
二婚主持词
2015/06/30 职场文书
详解nodejs内置模块
2021/05/06 NodeJs
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS