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


Posted in Javascript onAugust 25, 2020

本文实例为大家分享了vue实现移动端H5数字键盘组件的使用代码,供大家参考,具体内容如下

我们平时扫码付款的时候,经常会输入一些数字进行付款,仔细看了下键盘和系统的键盘有点不一样,于是今天买甘蔗的时候扫码付款就想了一下要怎么去实现一个。话不多说,直接上代码。

结果如下:

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

代码如下:

<template>
 <div class="keyboard-wrapper">
 <input type="text" v-model="NUM" @focus="show = true" onfocus="this.blur()"/>
 <div class="keyboard" v-if="show">
 <div class="num">
 <table>
  <tr>
  <td @click="change(1)" :class="[active === 1 ? 'active' : '']" @touchstart="msDown(1)" @touchend="msUp(1)">1</td>
  <td @click="change(2)" :class="[active === 2 ? 'active' : '']" @touchstart="msDown(2)" @touchend="msUp(2)">2</td>
  <td @click="change(3)" :class="[active === 3 ? 'active' : '']" @touchstart="msDown(3)" @touchend="msUp(3)">3</td>
  <td rowspan="2" class="del" @click="del">×</td>
  </tr>
  <tr>
  <td @click="change(4)" :class="[active === 4 ? 'active' : '']" @touchstart="msDown(4)" @touchend="msUp(4)">4</td>
  <td @click="change(5)" :class="[active === 5 ? 'active' : '']" @touchstart="msDown(5)" @touchend="msUp(5)">5</td>
  <td @click="change(6)" :class="[active === 6 ? 'active' : '']" @touchstart="msDown(6)" @touchend="msUp(6)">6</td>
  </tr>
  <tr>
  <td @click="change(7)" :class="[active === 7 ? 'active' : '']" @touchstart="msDown(7)" @touchend="msUp(7)">7</td>
  <td @click="change(8)" :class="[active === 8 ? 'active' : '']" @touchstart="msDown(8)" @touchend="msUp(8)">8</td>
  <td @click="change(9)" :class="[active === 9 ? 'active' : '']" @touchstart="msDown(9)" @touchend="msUp(9)">9</td>
  <td rowspan="2" class="comfirm" @click="comfirm">确定</td>
  </tr>
  <tr>
  <td colspan="2" @click="change(0)" :class="[active === 0 ? 'active' : '']" @touchstart="msDown(0)" @touchend="msUp(0)">0</td>
  <td colspan="1" @click="change('.')" :class="[active === '.' ? 'active' : '']" @touchstart="msDown('.')" @touchend="msUp('.')">.</td>
  </tr>
 </table>
 </div>
 </div>
 </div>
</template>
 
<script>
 
export default {
 name: 'App',
 data () {
 return {
 active: null,
 show: false,
 NUM: '',
 result: []
 };
 },
 computed: {
 // 统计打中的地鼠数量
 num: function () {
 return this.result.join('');
 }
 },
 created () {
 },
 mounted () {
 },
 methods: {
 msDown (v) {
 this.active = v;
 },
 msUp (v) {
 this.active = '';
 },
 stopInput () {
 return false;
 },
 change (val, $event) {
 if (this.result.length === 0 && val === '.') {
 return false;
 } else {
 this.result.push(val);
 this.NUM = this.result.join('');
 }
 },
 del () {
 this.result.pop();
 this.NUM = this.result.join('');
 this.$emit('del', this.NUM);
 },
 comfirm () {
 this.$emit('comfirm', this.NUM);
 this.show = false;
 }
 }
};
</script>
<style lang="less" scoped>
.keyboard-wrapper {
 user-select: none;
 input {
 width:100%;
 height:50px;
 font-size:25px;
 }
 .keyboard {
 position: fixed;
 bottom: 0;
 width: 100%;
 .num {
 table {
 width: 100%;
 border: 1px solid #ccc;
 border-collapse: collapse;
 background: #fff;
 td {
  height: 50px;
  vertical-align: middle;
  color: #333;
  font-size: 20px;
  border: 1px solid #ccc;
  text-align: center;
 }
 td.active{
  background:#ccc;
 }
 .del {
  background: #eee;
 }
 .comfirm {
  font-size: 16px;
  width: 80px;
  background: #118eeb;
  color: #fff;
 }
 }
 }
 }
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
工作需要写的一个js拖拽组件
Jul 28 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
Ionic快速安装教程
Jun 03 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
jQuery中delegate()方法的用法详解
Oct 13 Javascript
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
解析Vue 2.5的Diff算法
Nov 28 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 #Javascript
js实现页面导航层级指示效果
Aug 25 #Javascript
js实现拖拽元素选择和删除
Aug 25 #Javascript
基于vue实现简易打地鼠游戏
Aug 21 #Javascript
vue实现打地鼠小游戏
Aug 21 #Javascript
js实现滑动进度条效果
Aug 21 #Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 #Javascript
You might like
一个SQL管理员的web接口
2006/10/09 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
Prototype String对象 学习
2009/07/19 Javascript
javascript parseInt与Number函数的区别
2010/01/21 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
基于Django的ModelForm组件(详解)
2017/12/07 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
pandas-resample按时间聚合实例
2019/12/27 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
股权转让意向书
2014/04/01 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
刑事申诉状范文
2015/05/20 职场文书
大学生入党自传2015
2015/06/26 职场文书
关于python中模块和重载的问题
2021/11/02 Python