这篇文章主要介绍了关于使用vue自定义数字键盘组件的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
最近做 Vue 开发，因为有不少页面涉及到金额输入，产品老是觉得用原生的 input 进行金额输入的话 体验很不好，于是自己动手写了一个使用Vue自定义数字键盘组件，具体实现代码大家参考下本文
为了满足用户体验，小编用vue写了一个自定义数字键盘组件，用户体验度还不错。
废话不多说，先上效果图吧~
效果图
立即学习“前端免费学习笔记（深入）”；
具体实现
布局排版
请输入金额
{{ money }}
7
8
9
C
4
5
6
清空
1
2
3
.
0
确认
登录后复制
布局方面我全部采用了 p 元素来模拟，方便好用 (๑ŐдŐ)b
键盘按键方面，每个按钮都设置了其自定义属性值 num ，目的就是为了区分按键后产生不同的效果
事件绑定在了父级，通过捕获来确定具体点击的元素
样式代码我在这里就不贴了，具体的我托管到 github 上了~
输入判断
对于键盘来说，最主要的就是输入判断，整个键盘的输入都是先经过 _handleKeyPress 进行处理的
//处理按键_handleKeyPress(e) { let num = e.target.dataset.num; //不同按键处理逻辑 // -1 代表无效按键，直接返回 if (num == -1) return false; switch (String(num)) { //小数点 case '.': this._handleDecimalPoint(); break; //删除键 case 'D': this._handleDeleteKey(); break; //清空键 case 'C': this._handleClearKey(); break; //确认键 case 'S': this._handleConfirmKey(); break; default: this._handleNumberKey(num); break; }}
登录后复制
可以看出，我将按键种类分为了，五大类，分别是 小数点 、 删除（退格）键 、 清空键 、 确认键 和 数字键 ，分别对用不同的处理函数，接下来我们一一来分析~
小数点，由于最多只能输入一个小数点，因此需要对其判断，如果有小数点直接返回；没有的话，也要分小数点是不是第一个输入的字符，如果是就将其变成 0. ，如果不是将小数点追加到当前字符末尾；
//处理小数点函数 _handleDecimalPoint() { //如果包含小数点，直接返回 if (this.money.indexOf('.') > -1) return false; //如果小数点是第一位，补0 if (!this.money.length) this.money = '0.'; //如果不是，添加一个小数点 else this.money = this.money + '.'; }
登录后复制
删除（退格）键，处理起来比较方便，先判断当前输入的字符是否为空，如果没有字符，直接返回，否则将字符串最后一个字符删除；
//处理删除键 _handleDeleteKey() { let S = this.money; //如果没有输入，直接返回 if (!S.length) return false; //否则删除最后一个 this.money = S.substring(0, S.length - 1); }
登录后复制
清空键，逻辑最简单，直接将当前字符清空即可；
//处理清空键 _handleClearKey() { this.money = ''; }
登录后复制
确认键，判断当前字符是否为空，为空就提示信息并返回，不为空我们也要进行判断，如果输入的是 8. 这种格式，我们需要对齐格式化成 8.00 这种形式，否则就直接保留两位小数，最后在触发 回调，并把结果作为参数传递过去；
_handleConfirmKey() { let S = this.money; //未输入 if (!S.length){ alert( '您目前未输入!' ) return false; } //将 8. 这种转换成 8.00 if (S.indexOf('.') > -1 && S.indexOf('.') == (S.length - 1)) S = Number(S.substring(0, S.length - 1)).toFixed(2); //保留两位 S = Number(S).toFixed(2); this.$emit('confirmEvent',S) }
登录后复制
数字键，逻辑也不是很复杂，主要先看其有没有小数点，如果有小数点，那么最多输入两位数字，如果没有小数点，得判断第一位输入的是是不是0 ， 如果是0，那么接下来就只能输入小数点了，而且也要杜绝 0000 这种无效的输入，因此我多加了一个判断，否则就直接追加在当前字符后面即可；
//处理数字 _handleNumberKey(num) { let S = this.money; //如果有小数点且小数点位数不小于2 if ( S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length -1)) { //如果第一位是0，只能输入小数点 if (num == 0 && S.length == 0) this.money = '0.'; else { if (S.length && Number(S.charAt(0)) === 0) return; this.money = S + num; } } }
登录后复制
组件引入
组件准备好了，只需填好路径，在对应的 components 中注册后，直接放在页面上使用使用即可，类似下面
登录后复制
其中， _confirmEvent 是点击确认键的回调，参数就是输入的金额，我这里只是简单的打印而已~
_confirmEvent(res){ console.log(res)}
登录后复制
效果就跟下面差不多，
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
VueJS组件之间通过props交互及验证的方式
VueJS组件之间通过props交互及验证的方式
以上就是使用Vue自定义数字键盘组件的方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2747671.html
