为了满足用户体验,小编用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; } }
内容版权声明:除非注明,否则皆为本站原创文章。