使用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 相关文章推荐
javascript编程起步(第六课)
Jan 10 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
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
php下过滤HTML代码的函数
2007/12/10 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
python ElementTree 基本读操作示例
2009/04/09 Python
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
在Django中实现添加user到group并查看
2019/11/18 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
高中课程设置方案
2014/05/28 职场文书
2015年司机工作总结
2015/04/23 职场文书
800字作文之大雪
2019/12/04 职场文书
Js类的构建与继承案例详解
2021/09/15 Javascript
一级电子管军用接收机测评
2022/04/05 无线电
Redis基本数据类型Set常用操作命令
2022/06/01 Redis