铁雪资源网 Design By www.gsvan.com
本文实例为大家分享了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 " @touchstart="msDown(1)" @touchend="msUp(1)">1</td> <td @click="change(2)" :class="[active === 2 " @touchstart="msDown(2)" @touchend="msUp(2)">2</td> <td @click="change(3)" :class="[active === 3 " @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 " @touchstart="msDown(4)" @touchend="msUp(4)">4</td> <td @click="change(5)" :class="[active === 5 " @touchstart="msDown(5)" @touchend="msUp(5)">5</td> <td @click="change(6)" :class="[active === 6 " @touchstart="msDown(6)" @touchend="msUp(6)">6</td> </tr> <tr> <td @click="change(7)" :class="[active === 7 " @touchstart="msDown(7)" @touchend="msUp(7)">7</td> <td @click="change(8)" :class="[active === 8 " @touchstart="msDown(8)" @touchend="msUp(8)">8</td> <td @click="change(9)" :class="[active === 9 " @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 " @touchstart="msDown(0)" @touchend="msUp(0)">0</td> <td colspan="1" @click="change('.')" :class="[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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无vue实现移动端H5数字键盘组件使用详解的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?