惊惶失措的意思,3gp下载电影,红五3d图库26226
为了满足用户体验，小编用vue写了一个自定义数字键盘组件，用户体验度还不错。
废话不多说，先上效果图吧~
效果图
具体实现
布局排版
我要评论
<div class='key-container'>
<div class='key-title'>请输入金额</div>
<div class='input-box'>{{ money }}</div>
<div class='keyboard' @click.stop='_handlekeypress'>
<div class='key-row'>
<div class='key-cell' data-num='7'>7</div>
<div class='key-cell' data-num='8'>8</div>
<div class='key-cell' data-num='9'>9</div>
<div class='key-cell' data-num='d'>c</div>
</div>
<div class='key-row'>
<div class='key-cell' data-num='4'>4</div>
<div class='key-cell' data-num='5'>5</div>
<div class='key-cell' data-num='6'>6</div>
<div class='key-cell' data-num='c'>清空</div>
</div>
<div class='key-row'>
<div class='key-cell' data-num='1'>1</div>
<div class='key-cell' data-num='2'>2</div>
<div class='key-cell' data-num='3'>3</div>
<div class='key-cell' data-num='-1'></div>
</div>
<div class='key-row'>
<div class='key-cell disabled' data-num='-1'></div>
<div class='key-cell' data-num='.'>.</div>
<div class='key-cell' data-num='0'>0</div>
<div class='key-cell' data-num='-1'></div>
</div>
<div class='key-confirm' data-num='s'>确认</div>
</div>
</div>
布局方面我全部采用了 div 元素来模拟，方便好用 (๑ŐдŐ)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 < 2)
this.money = s + num;
//没有小数点
if (!(s.indexof('.') > -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 中注册后，直接放在页面上使用使用即可，类似下面
<calculation @confirmevent="_confirmevent"></calculation>
其中， _confirmevent 是点击确认键的回调，参数就是输入的金额，我这里只是简单的打印而已~
_confirmevent(res){
console.log(res)
}
效果就跟下面差不多，
总结
以上所述是小编给大家介绍的使用vue自定义数字键盘组件(体验度极好)，希望对大家有所帮助
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论