为了满足用户体验,小编用vue写了一个自定义数字键盘组件,用户体验度还不错。
废话不多说,先上效果图吧~
& lt; div类=密钥容器的祝辞
& lt; div类=疤饷弊４乔胧淙虢鸲? lt;/div>
& lt; div类=笆淙肟颉痹趝{钱}}& lt;/div>
& lt; div类=凹獭盄click.stop=_handleKeyPress的祝辞
& lt; div类=発ey-row”比;
& lt; div类=肮丶赴眃ata-num=?”在7 & lt;/div>
& lt; div类=肮丶赴眃ata-num=' 8 '祝辞8 & lt;/div>
& lt; div类=肮丶赴眃ata-num=?”在9 & lt;/div>
& lt; div类=肮丶赴眃ata-num=' D '祝辞C
& lt;/div>
& lt; div类=発ey-row”比;
& lt; div类=肮丶赴眃ata-num=?”在4 & lt;/div>
& lt; div类=肮丶赴眃ata-num=?’在5 & lt;/div>
& lt; div类=肮丶赴眃ata-num=?”在6 & lt;/div>
& lt; div类=肮丶赴眃ata-num=' C '在清空& lt;/div>
& lt;/div>
& lt; div类=発ey-row”比;
& lt; div类=肮丶赴眃ata-num=' 1 '祝辞1 & lt;/div>
& lt; div类=肮丶赴眃ata-num=' 2 '在2 & lt;/div>
& lt; div类=肮丶赴眃ata-num=' 3 '祝辞3 & lt;/div>
& lt; div类=肮丶赴眃ata-num=' 1 '祝辞& lt;/div>
& lt;/div>
& lt; div类=発ey-row”比;
& lt; div类='关键细胞禁用' data-num=' 1 '祝辞& lt;/div>
& lt; div类=肮丶赴眃ata-num=' . '祝辞。;/div>
& lt; div类=肮丶赴眃ata-num=' 0 '祝辞0 & lt;/div>
& lt; div类=肮丶赴眃ata-num=' 1 '祝辞& lt;/div>
& lt;/div>
& lt; div类=' key-confirm ' data-num=S祝辞确认& lt;/div>
& lt;/div>
& lt;/div>
布局方面我全部采用了div元素来模拟,方便好用(& # 3665;& # 336;д& # 336;)b
键盘按键方面,每个按钮都设置了其自定义属性值num,目的就是为了区分按键后产生不同的效果
事件绑定在了父级,通过捕获来确定具体点击的元素
样式代码我在这里就不贴了,具体的我托管到github上了~
对于键盘来说,最主要的就是输入判断,整个键盘的输入都是先经过_handleKeyPress进行处理的
//处理按键
_handleKeyPress (e) {
让num=e.target.dataset.num;//不同按键处理逻辑//1代表无效按键,直接返回
如果(num==1)返回false;
开关(String (num)) {//小数点
例“。”:
this._handleDecimalPoint ();
打破;//删除键
例“D”:
this._handleDeleteKey ();
打破;//清空键
例“C”:
this._handleClearKey ();
打破;//确认键
例“S”:
this._handleConfirmKey ();
打破;
默认值:
this._handleNumberKey (num);
打破;
}
}
可以看的出,我将按键种类分为了,五大类,分别是小数点,删除(退格)键,清空键,确认键和数字键,分别对用不同的处理函数,接下来我们一一来分析~
小数点,由于最多只能输入一个小数点,因此需要对其判断,如果有小数点直接返回,没有的话,也要分小数点是不是第一个输入的字符,如果是就将其变成0。,如果不是将小数点追加到当前字符末尾;
//处理小数点函数
_handleDecimalPoint () {//如果包含小数点,直接返回
如果(this.money.indexOf祝辞(' . ');1)返回false;//如果小数点是第一位,补0
如果(! this.money.length)
这一点。金钱=0。;//如果不是,添加一个小数点
其他的
这一点。钱=Ｇ?“。”;
}
删除(退格键),处理起来比较方便,先判断当前输入的字符是否为空,如果没有字符,直接返回,否则将字符串最后一个字符删除;
//处理删除键
_handleDeleteKey () {
让年代=this.money;//如果没有输入,直接返回
如果(! S.length)返回false;//否则删除最后一个
这一点。钱=ubstring (0,。长度- 1);
}
清空键,逻辑最简单,直接将当前字符清空即可。
//处理清空键
_handleClearKey () {
这一点。金钱=";
}
确认键,判断当前字符是否为空,为空就提示信息并返回,不为空我们也要进行判断,如果输入的是8。这种格式,我们需要对齐格式化成8.00这种形式,否则就直接保留两位小数,最后在触发回调,并把结果作为参数传递过去;
