h5 android数字键盘,vue实现移动端H5数字键盘组件使用详解

本文实例为大家分享了vue实现移动端H5数字键盘组件的使用代码，供大家参考，具体内容如下

我们平时扫码付款的时候，经常会输入一些数字进行付款，仔细看了下键盘和系统的键盘有点不一样，于是今天买甘蔗的时候扫码付款就想了一下要怎么去实现一个。话不多说，直接上代码。

结果如下：

代码如下：

1	2	3	×
4	5	6
7	8	9	确定
0		.

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;

}

}

};

.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;

}

}

}

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。