使用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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
Vue精简版风格概述
Jan 30 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
原生js实现贪吃蛇游戏
Oct 26 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
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
浅谈js中的bind
2019/03/18 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
Python标准库之Sys模块使用详解
2015/05/23 Python
python实现图片识别汽车功能
2018/11/30 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
《再别康桥》教学反思
2014/02/12 职场文书
党支部综合考察材料
2014/05/19 职场文书
投标服务承诺书
2014/05/28 职场文书
解除劳动合同协议书
2014/09/17 职场文书
保送生自荐信范文
2015/03/26 职场文书
家属联谊会致辞
2015/07/31 职场文书
员工升职自我评价
2019/03/26 职场文书
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS