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的parseInt 进制问题
May 07 Javascript
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
npm 语义版本控制详解
Sep 10 Javascript
小程序实现背景音乐播放和暂停
Jun 19 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
用Zend Encode编写开发PHP程序
2006/10/09 PHP
php访问查询mysql数据的三种方法
2006/10/09 PHP
探讨各种PHP字符串函数的总结分析
2013/06/05 PHP
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
JS中==与===操作符的比较
2009/03/21 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
跟老齐学Python之再深点,更懂list
2014/09/20 Python
Python贪心算法实例小结
2018/04/22 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
物业管理求职自荐信
2013/09/25 职场文书
幼师专业求职推荐信
2013/11/08 职场文书
法学院方阵解说词
2014/01/29 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
五年级小学生评语
2014/12/26 职场文书
雷峰塔导游词
2015/02/09 职场文书
铁人观后感
2015/06/16 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL