使用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 实用函数的使用详解
May 10 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
js事件触发操作实例分析
Jun 21 Javascript
超简单的微信小程序轮播图
Nov 22 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
ES6的循环与可迭代对象示例详解
Jan 31 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
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
繁简字转换功能
2006/07/19 Javascript
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
用JavaScript显示随机图像或引用
2009/04/21 Javascript
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
Java基础知识面试题
2014/03/25 面试题
应用电子技术专业个人求职信
2013/09/21 职场文书
优秀幼教自荐信
2014/02/03 职场文书
《值日生》教学反思
2014/02/17 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript