vue實現移動端H5數字鍵盤元件使用詳解
阿新 • • 發佈:2020-08-24
本文例項為大家分享了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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。