使用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自定义数字键盘组件(体验度极好),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Vue键盘事件用法总结

    这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记,学习一下Vue键盘事件 键盘事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></sc

  • 使用vue实现简单键盘的示例(支持移动端和pc端)

    常看到各种app应用中使用自定义的键盘,本例子中使用vue2实现个简单的键盘,支持在移动端和PC端使用 实现效果: Keyboard.vue <template> <div class="keyboard" v-show="showKeyboard" v-clickoutside="closeModal"> <p v-for="keys in keyList"> <template v

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

    为了满足用户体验,小编用vue写了一个自定义数字键盘组件,用户体验度还不错. 废话不多说,先上效果图吧~ 效果图 具体实现 布局排版 <div class='key-container'> <div class='key-title'>请输入金额</div> <div class='input-box'>{{ money }}</div> <div class='keyboard' @click.stop='_handleKeyPress'

  • vue自定义数字输入框组件

    最近自己在练习组件开发,做了一个简单的数字输入框加减的组件,效果图如下: 组件可以传入三个参数,value是初始化值,max是可输入的最大值,min是可输入最小值,当然参数可以按需求继续扩展的. 组件代码如下: <template>     <div style="text-align: center;margin-top: 20px;">         <input type="text" v-model="current

  • vue实现移动端H5数字键盘组件使用详解

    本文实例为大家分享了vue实现移动端H5数字键盘组件的使用代码,供大家参考,具体内容如下 我们平时扫码付款的时候,经常会输入一些数字进行付款,仔细看了下键盘和系统的键盘有点不一样,于是今天买甘蔗的时候扫码付款就想了一下要怎么去实现一个.话不多说,直接上代码. 结果如下: 代码如下: <template> <div class="keyboard-wrapper"> <input type="text" v-model="NUM

  • 基于Vue开发数字输入框组件

    随着 Vue 越来越火热, 相关组件库也非常多啦, 只用轮子怎么够, 还是要造起来!!! 1.概述 Vue组件开发的API:props.events和slots 2.组件代码 github地址:https://github.com/MengFangui/VueInputNumber 效果: (1)index.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-

  • vue自定义翻页组件的方法

    本文实例为大家分享了vue自定义翻页组件的具体代码,供大家参考,具体内容如下 效果图如下: 1.在components建立page.vue文件 <template>     <div class="pagination">         <!-- 上 -->         <button :disabled="pageNo == 1" @click="getPageNo(pageNo - 1)">

  • Android 仿微信自定义数字键盘的实现代码

    本文介绍了Android 仿微信自定义数字键盘的实现代码,分享给大家,希望对大家有帮助 最终效果: 实现这个自定义键盘的思路很简单: 要写出一个数字键盘的布局: 与 Edittext 结合使用,对每个按键的点击事件进行处理: 禁用系统软键盘. 有了思路,实现起来就不难了. 1. 实现键盘的 xml 布局 网格样式的布局用 GridView 或者 RecyclerView 都可以实现,其实用 GridView 更方便一些,不过我为了多熟悉 RecyclerView 的用法,这里选择用了 Recyc

  • Vue Components 数字键盘的实现

    本文介绍了Vue Components 数字键盘的实现,分享给大家,具体如下: 项目地址 点击查看 项目演示 点击查看 首先监听所有的input,有input聚焦时调起数字键盘,通过getBoundingClientRect判断input位置让数字键盘在input附近,失去焦点后则隐藏数字键盘 let inputElement = document.getElementsByTagName("input"); [...inputElement].forEach(ipele =>

  • Vue.js数字输入框组件使用方法详解

    本文实例为大家分享了Vue.js数字输入框组件的具体实现代码,供大家参考,具体内容如下 效果 入口页 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0

  • vue自定义switch开关组件,实现样式可自行更改

    用法: import switchc from './public/switch' <switchc v-model="value1" text="on|off"></switchc> 属性 text 非必填,类型为string,要求格式为"on|off" ,以 | 分隔 事件 change html部分: <template> <div> <span class="weui-swi

  • 使用Vue 自定义文件选择器组件的实例代码

    本文 GitHub  https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料.欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西. 文件选择元素是web上最难看的 input 类型之一.它们在每个浏览器中实现的方式不同,而且通常非常难看.这里有一个解决办法,就是把它封装成一个组件. 安装 如果你尚未设置项目,可以使用 vue-cli 的 webpack-simple 模板启动一个新项目. $ npm

随机推荐