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中的集合及效率
Jan 08 Javascript
JQuery 1.4 中的Ajax问题
Jan 23 Javascript
js 巧妙去除数组中的重复项
Jan 25 Javascript
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
React如何实现浏览器打印部分内容详析
May 19 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
js实现弹幕飞机效果
Aug 27 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 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简单日历函数
2015/10/28 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
详解python中递归函数
2019/04/16 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
Pytorch之保存读取模型实例
2019/12/30 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
造型师求职自荐信
2013/09/27 职场文书
校班主任推荐信范文
2013/12/03 职场文书
个人求职信范例
2014/01/29 职场文书
办公室文员自荐书
2014/02/03 职场文书
烹饪自我鉴定
2014/03/01 职场文书
公司员工体检通知
2015/04/21 职场文书
八年级作文之感恩
2019/11/22 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js
MySQL为id选择合适的数据类型
2021/06/07 MySQL