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 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
javascript instanceof 与typeof使用说明
Jan 11 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 Javascript
vue中实现动态生成二维码的方法
Feb 21 Javascript
微信小程序用canvas画图并分享
Mar 09 Javascript
浅谈Vue的computed计算属性
Mar 21 Vue.js
探究一道价值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学习之PHP变量
2006/10/09 PHP
php中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
JS HTML5 音乐天气播放器(Ajax获取天气信息)
2013/05/26 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python Mysql自动备份脚本
2008/07/14 Python
python实现马耳可夫链算法实例分析
2015/05/20 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
python简单实现操作Mysql数据库
2018/01/29 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
PyQt5响应回车事件的方法
2019/06/25 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
详解如何修改python中字典的键和值
2020/09/29 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
《美丽的田园》教学反思
2014/03/01 职场文书
五分钟演讲稿
2014/04/30 职场文书
村庄绿化方案
2014/05/07 职场文书
保护环境的标语
2014/06/09 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书