本文实例为大家分享了vue实现移动端H5数字键盘组件的使用代码，供大家参考，具体内容如下
我们平时扫码付款的时候，经常会输入一些数字进行付款，仔细看了下键盘和系统的键盘有点不一样，于是今天买甘蔗的时候扫码付款就想了一下要怎么去实现一个。话不多说，直接上代码。
结果如下：
代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
<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> |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/CodingNoob/article/details/103450497
