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 相关文章推荐
读jQuery之三(构建选择器)
Jun 11 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
node实现的爬虫功能示例
May 04 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 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
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
php导入模块文件分享
2015/03/17 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
laravel5.6实现数值转换
2019/10/23 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
Web开发之JavaScript
2012/03/29 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
js判断节假日实例代码
2017/12/27 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
用python写asp详细讲解
2013/12/16 Python
python实现ping的方法
2015/07/06 Python
Python操作MongoDB详解及实例
2017/05/18 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
python3图片文件批量重命名处理
2019/10/31 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
个人求职简历中英文自我评价
2013/12/16 职场文书
护林防火标语
2014/06/27 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
Python绘画好看的星空图
2022/03/17 Python