使用Vue自定义数字键盘组件(体验度极好)


Posted in Javascript onDecember 19, 2017

为了满足用户体验,小编用vue写了一个自定义数字键盘组件,用户体验度还不错。

废话不多说,先上效果图吧~

效果图

使用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自定义数字键盘组件(体验度极好) 

总结

以上所述是小编给大家介绍的使用Vue自定义数字键盘组件(体验度极好),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
一文读懂ES7中的javascript修饰器
May 06 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 #Javascript
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 #Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 #Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 #jQuery
基于node.js实现微信支付退款功能
Dec 19 #Javascript
React Native之prop-types进行属性确认详解
Dec 19 #Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 #Javascript
You might like
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
php面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
php下安装配置fckeditor编辑器的方法
2011/03/02 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
Python函数嵌套实例
2014/09/23 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
PyQt5实现简易计算器
2020/05/30 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
python安装后的目录在哪里
2020/06/21 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
2014年母亲节演讲稿范文
2014/05/07 职场文书
四风对照检查剖析材料
2014/10/07 职场文书
教师业务学习材料
2014/12/16 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
带你了解Java中的ForkJoin
2022/04/28 Java/Android