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 相关文章推荐
取选中的radio的值
Jan 11 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
javascript使用call调用微信API
Dec 15 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
vue.js删除动态绑定的radio的指定项
Jun 02 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 Javascript
Vue中 axios delete请求参数操作
Aug 25 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
PHP新手上路(七)
2006/10/09 PHP
php cookie的操作实现代码(登录)
2010/12/29 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
php字符串过滤与替换小结
2015/01/26 PHP
php生成二维码
2015/08/10 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
会计自我鉴定
2013/11/02 职场文书
公司前台接待岗位职责
2013/12/03 职场文书
《我的信念》教学反思
2014/02/15 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
法学求职信
2014/06/22 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
事业单位年度考核评语
2014/12/31 职场文书
应届毕业生自荐信
2015/03/04 职场文书
欠款起诉书范文
2015/05/19 职场文书
2019新员工心得体会
2019/06/25 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python