vue自定义数字键盘

输入框快速调出数字键盘

<input type="tel" pattern="[0-9]*">或者
<input type="num" pattern="[0-9]*">

自定义数字键盘

效果图

单独在对于页面里面写

<template><div class="keyboard-wrapper"><inputtype="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><tdcolspan="2"@click="change(0)":class="[active === 0 ? 'active' : '']"@touchstart="msDown(0)"@touchend="msUp(0)">0</td><tdcolspan="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="scss" 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>

组件引入

在这里插入代码片

vue自定义数字键盘相关推荐

vue 自定义键盘组件_使用Vue自定义数字键盘组件的方法
这篇文章主要介绍了关于使用Vue自定义数字键盘组件的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下最近做 Vue 开发,因为有不少页面涉及到金额输入,产品老是觉得用原生的 inp ...
vue封装自定义数字键盘组件
最近在公司做一个项目,简单来说就是web端微信公众号上的一个申请表单页面,随便如个图环境: vue框架 + vant组件库 + 其它(这里用不上的,不说) 具体如图: 都知道,input输入框如果不 ...
vue 自定义键盘组件_vue 自定义数字键盘+mint UI MessageBox的应用
功能: 实现自定义数字键盘,输入数字超过两位时不可输入点击清空清空输入框内的值提交时弹出提示框,并显示所输入的数字用--mint UI实现效果图: 9. //将变量numberval赋给valu ...
小程序自定义数字键盘|仿微信支付、支付宝支付密码键盘
微信小程序自定义键盘插件wcKeyboard|仿微信数字软键盘|仿支付宝自定义数字键盘|小程序自定义模拟系统键盘前段时间有开发过一个html5仿支付宝.微信支付数字键盘,在某些情况下自定义数字键盘应 ...
android 支付数字键盘,微信小程序自定义数字键盘|仿支付宝、微信支付数字软键盘...
(此图片来源于网络,如有侵权,请联系删除! ) 前几天有开发过一个html5仿支付宝.微信支付数字键盘,在某些特定场景下自定义数字键盘应用还是蛮广泛的,比如小程序商城系统需要零钱支付 ,会员卡支付 ...
android自定义数字键盘和字母键盘,Android自定义键盘的实现（数字键盘和字母键盘）...
Android自定义键盘的实现(数字键盘和字母键盘) 发布时间:2020-09-04 03:18:48 来源:脚本之家阅读:100 作者:浪淘沙xud 在项目中,产品对于输入方式会有特殊的要求,需要 ...
Android仿支付宝密码输入框(自定义数字键盘)
1.概述 Android自定义密码输入框,通过自定义输入显示框和自定义输入键盘,实现仿支付宝数字键盘等.代码已托管到github,有需要的话可以去我的github下载. 可以自定义关闭图标.文字内 ...
android自定义view(自定义数字键盘)
序言:在上周的项目中,需要做一个密码锁的功能,然后密码下面还得有键盘,就类似支付宝支付的时候那样: 当然了,我们项目的需求简单点,纯数字的就可以了,然后上周就百度了自定义键盘,随便找了一个修改修改就用 ...
vue +element 数字键盘，vant 数字键盘使用
下载vant 不在赘述可以看官网 min.js 写入 import 'vant/lib/index.css'; import { NumberKeyboard } from 'vant'; Vue ...
android 开发数字键盘,Android 仿「微信」自定义数字键盘
[实例简介] 详情见:http://blog.csdn.net/qq_24867873/article/details/73771817 [实例截图] [核心代码] VirtualKeyboardDe ...

vue自定义数字键盘

输入框快速调出数字键盘

自定义数字键盘

效果图

单独在对于页面里面写

组件引入

vue自定义数字键盘相关推荐

最新文章

热门文章