全国咨询热线:18720358503

微信开发小程序_vue完成一个6个输入框的验证码输

类别:行业新闻 发布时间:2021-01-05 浏览人次:

vue实现一个6个输入框的验证码输入组件功能的实例代码       这篇文章主要介绍了vue实现一个6个输入框的验证码输入组件功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

要实现的功能:

完全和单输入框一样的操作,甚至可以插入覆盖:

1,限制输入数字

2,正常输入

3,backspace删除

4,paste任意位置粘贴输入

5,光标选中一个数字,滚轮可以微调数字大小,限制0-9

6,123|456 自动覆盖光标后输入的字符,此时光标在3后,继续输入111,会得到123111,而不用手动删除456

7,封装成vue单文件组件,方便任意调用。

模板代码

 template 
 div 
 div @keydown="keydown" @keyup="keyup" @paste="paste" @mousewheel="mousewheel"
 @input="inputEvent" 
 input max="9" min="0" maxlength="1" data-index="0" v-model.trim.number="input[0]" type="number"
 ref="firstinput"/ 
 input max="9" min="0" maxlength="1" data-index="1" v-model.trim.number="input[1]" type="number"/ 
 input max="9" min="0" maxlength="1" data-index="2" v-model.trim.number="input[2]" type="number"/ 
 input 
 input max="9" min="0" maxlength="1" data-index="4" v-model.trim.number="input[4]" type="number"/ 
 input max="9" min="0" maxlength="1" data-index="5" v-model.trim.number="input[5]" type="number"/ 
 /div 
 /div 
 /template 

实现了键盘的keydown/keyup/paste/input和鼠标滚轮mousewheel事件

使用了6个输入框的方案来实现。

样式部分:使用了scss模式

 style scoped lang="scss" 
 .input-box {
 .input-content {
 width: 512px;
 height: 60px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 input {
 color: inherit;
 font-family: inherit;
 border: 0;
 outline: 0;
 border-bottom: 1px solid #919191;
 height: 60px;
 width: 60px;
 font-size: 44px;
 text-align: center;
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
 appearance: none;
 margin: 0;
 /style 

具体实现逻辑:主要实现以上几个键盘事件操作。

 script 
 export default {
 data() {
 return {
 // 存放粘贴进来的数字
 pasteResult: [],
 pro凡科抠图: ['code'],
 computed: {
 input() {
 // code 是父组件传进来的默认值,必须是6位长度的数组,这里就不再做容错判断处理
 // 最后空数组是默认值
 return this.code || this.pasteResult.length === 6 this.pasteResult : ['', '', '', '', '', '']
 methods: {
 // 解决一个输入框输入多个字符
 inputEvent(e) {
 var index = e.target.dataset.index * 1;
 var el = e.target;
 this.$set(this.input, index, el.value.slice(0, 1))
 keydown(e) {
 var index = e.target.dataset.index * 1;
 var el = e.target;
 if (e.key === 'Backspace') {
 if (this.input[index].length 0) {
 this.$set(this.input, index, '')
 } else {
 if (el.previousElementSibling) {
 el.previousElementSibling.focus()
 this.$set(this.input, index - 1, '')
 } else if (e.key === 'Delete') {
 if (this.input[index].length 0) {
 this.$set(this.input, index, '')
 } else {
 if (el.nextElementSibling) {
 this.$set(this.input, index = 1, '')
 if (el.nextElementSibling) {
 el.nextElementSibling.focus()
 } else if (e.key === 'Home') {
 el.parentElement.children[0] el.parentElement.children[0].focus()
 } else if (e.key === 'End') {
 el.parentElement.children[this.input.length - 1] el.parentElement.children[this.input.length - 1].focus()
 } else if (e.key === 'ArrowLeft') {
 if (el.previousElementSibling) {
 el.previousElementSibling.focus()
 } else if (e.key === 'ArrowRight') {
 if (el.nextElementSibling) {
 el.nextElementSibling.focus()
 } else if (e.key === 'ArrowUp') {
 if (this.input[index] * 1 9) {
 this.$set(this.input, index, (this.input[index] * 1 + 1).toString());
 } else if (e.key === 'ArrowDown') {
 if (this.input[index] * 1 0) {
 this.$set(this.input, index, (this.input[index] * 1 - 1).toString());
 keyup(e) {
 var index = e.target.dataset.index * 1;
 var el = e.target;
 if (/Digit|Numpad/i.test(e.code)) {
 this.$set(this.input, index, e.code.replace(/Digit|Numpad/i, ''));
 el.nextElementSibling el.nextElementSibling.focus();
 if (index === 5) {
 if (this.input.join('').length === 6) {
 document.activeElement.blur();
 this.$emit('complete', this.input);
 } else {
 if (this.input[index] === '') {
 this.$set(this.input, index, '');
 mousewheel(e) {
 var index = e.target.dataset.index;
 if (e.wheelDelta 0) {
 if (this.input[index] * 1 9) {
 this.$set(this.input, index, (this.input[index] * 1 + 1).toString());
 } else if (e.wheelDelta 0) {
 if (this.input[index] * 1 0) {
 this.$set(this.input, index, (this.input[index] * 1 - 1).toString());
 } else if (e.key === 'Enter') {
 if (this.input.join('').length === 6) {
 document.activeElement.blur();
 this.$emit('complete', this.input);
 paste(e) {
 // 当进行粘贴时
 e.clipboardData.items[0].getAsString(str = {
 if (str.toString().length === 6) {
 this.pasteResult = str.split('');
 document.activeElement.blur();
 this.$emit('complete', this.input);
 mounted() {
 // 等待dom渲染完成,在执行focus,否则无法获取到焦点
 this.$nextTick(() = {
 this.$refs.firstinput.focus()
 /script 

如果你发现了bug,或者有优化空间,欢迎你的指正和建议。我会随时更新到原代码当中,分享给大家。

到此这篇关于vue实现一个6个输入框的验证码输入组件的文章就介绍到这了,更多相关vue实现输入框的验证码输入组件内容请搜索凡科以前的文章或继续浏览下面的

推荐阅读

微信开发小程序_vue完成一个6个输入框的验证码输

vue完成一个6个键入框的认证码键入部件作用的案例编码 本文关键详细介绍了vue完成一个6个键入框的认证码键入部件作用,文中根据案例编码给大伙儿详细介绍的十分详尽,对大伙...

2021-01-05
导航设计,怎样做网站导航设计

针对在深圳市制作网页设计方案很久的大家来讲,为网站制作导航栏就好似为房屋夯实基础。假如路基不牢固,再壮阔的设计方案也没法遮盖工程建筑构造的潜伏风险性,实际上网站也...

2021-01-05
常德企业网站建设教程-盛金重工 网络推广案例

企业是挖泥船,吹泥船,淘金船,挖沙船,洗沙机,制砂机,铁沙获取机械设备,筛沙机,抽沙船,挖沙机械设备的技术专业生产制造生产厂家。企业自200八年创立迄今,早已变成全国性淘金机械设...

2021-01-05
广州凡科互联网科技股份有限公司招聘产品设计

招聘人数:30职位信息工作职责:1、负责公司迪士尼、漫威、KT、小黄人等国际知名授权IP品牌产品的设计研究工作,有较强的设计需求分析能力,能准确把握设计方向和设计风格;2、负...

2021-01-05
广州凡科互联网科技股份有限公司招聘招聘专员

招聘人数:20职位信息【岗位职责】1、负责在各种招聘渠道平台的开发和招聘信息的发布;2、负责应聘者简历的筛选及初步电话面试;3、负责应聘者电话邀约面试及面试安排和面试结果...

2021-01-05
网站的设计与切图-营销型网站建设服务

营销推广型网站,与知名品牌型网站、各大网站型官方网站差别营销推广型网站功利性性要较强,会放弃掉传统式官方网站、知名品牌网站不紧不慢构造,针对大中型公司、著名知名品...

2021-01-05
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信