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 相关文章推荐
Javascript中的数学函数
Apr 04 Javascript
javascript得到XML某节点的子节点个数的脚本
Oct 11 Javascript
两个JavaScript jsFiddle JSBin在线调试器
Mar 14 Javascript
JavaScript 原型学习总结
Oct 29 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
探究一道价值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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
PHP生成静态页面详解
2006/11/19 PHP
关于php fread()使用技巧
2010/01/22 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
jQuery动画效果图片轮播特效
2016/01/12 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
学习python的几条建议分享
2013/02/10 Python
python中去空格函数的用法
2014/08/21 Python
python编写的最短路径算法
2015/03/25 Python
详细介绍Python的鸭子类型
2016/09/12 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
简单谈谈python基本数据类型
2018/09/26 Python
python中栈的原理及实现方法示例
2019/11/27 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
控制工程专业个人求职信
2013/09/25 职场文书
测试工程师岗位职责
2013/11/28 职场文书
安全生产承诺书
2014/03/26 职场文书
语文高效课堂实施方案
2014/05/03 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
英语教师求职信范文
2015/03/20 职场文书
九九重阳节致辞
2015/07/31 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js