vue+iview实现手机号分段输入框
作者:[暂停使用]任先阳 发布时间:2024-04-26 17:40:35
标签: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>
来源:https://blog.csdn.net/qq_39571197/article/details/84873286
0
投稿
猜你喜欢
- 百度OCR体验地址:https://ai.baidu.com/tech/imagerecognition/general腾讯OCR体验地址:
- 前言在github中经常可以看到下面的日历图,可以用来表示每一天在github上的活跃程度。类似的方法也可以用到空气质量的可视化方式中来,只
- 前言在了解了REST farmwork封装的视图类之后,我对python的面向对象有了更深刻的理解。Django RESR framewor
- JavaScript的对象都是实例化了的,只可以使用而不能够创建继承于这些对象的新的子类. window对象为所有对象的Parent win
- 首先打开网站https://www.zymk.cn/1/37988.html打开开发者工具选择XHR标签页,没有找到什么再查看一下这些图片的
- 1、使用系统函数__import_()stringmodule = __import__('string')2、使用imp
- 目录前言1-下载python3.8压缩包2-解压缩安装包3-安装依赖工具4-安装python3.85-修改python2软链接6-修改yum
- torch.Tensor.detach()的使用detach()的官方说明如下:Returns a new Tensor, detached
- 9月23,Django 发布了2.0a1版本,这是一个 feature freeze 版本,如果没有什么意外的话,2.0正式版不会再增加新的
- BULK INSERT以用户指定的格式复制一个数据文件至数据库表或视图中。 语法:BULK INSERT [ [ 'database
- 复合索引(又称为联合索引),是在多个列上创建的索引。创建复合索引最重要的是列顺序的选择,这关系到索引能否使用上,或者影响多少个谓词条件能使用
- python——pip install xxx报错SyntaxError: invalid syntax在安装好python后,进入pyth
- 现在IE7已经推出一段时间并且渗透到用户当中,不用等太久我们就可以在页面上使用更高级的CSS。两个最有用的项目将是 Child子和Adjac
- python提供了4种方式来满足进程间的数据通信1. 使用multiprocessing.Queue可以在进程间通信,但不能在Pool池创建
- 今天项目中遇到了中文编码的zip文件,处理了蛮长时间,所以记录下,以免下次踩坑。Python2下Python2中读取zip文件,zipfil
- CURLOPT_RETURNTRANSFER 选项:curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);如
- 前言总结一下最近看的关于opencv图像几何变换的一些笔记. 这是原图: 1.平移import cv2import numpy as npi
- 实战场景 本篇博客学习字体反爬,涉及的站点是实习 x,目标站点地址直接百度搜索即可。可以看到右侧源码中出现了很多&ldqu
- Win7或Windows server 2008中IIS7支持ASP+Access解决方法:1. 让IIS7支持ASPWin7或Window
- 导出数据报错SHOW VARIABLES LIKE "secure_file_priv";查看默认导出目录mysql&g