vue +element 数字键盘，vant 数字键盘使用

下载vant 不在赘述可以看官网

min.js 写入

import 'vant/lib/index.css';
import { NumberKeyboard } from 'vant';

Vue.use(NumberKeyboard);

下面是页面

<template><div ><van-number-keyboard:show="show"extra-key="."@input="onInput"@delete="onDelete"
/>
</div></div>
</template>
<!-- @blur="show = false"--><script>
import { Toast } from 'vant';export default {data() {return {show: true}},methods: {onInput(value) {Toast(value);},onDelete() {Toast('删除');}}
}
</script><style scoped>
/deep/ .van-key {height: 100% !important;}/deep/ .van-number-keyboard__body {height: 100% !important;}.van-number-keyboard {bottom: 0 !important;right: 0 !important;top: 70px !important;left: 50%;padding-bottom: 0 !important;width: 50% !important;}
</style>

因为我的需求是固定在最右边，并且占比50%，直接修改css样式就可以了，同时，vant还提供了很多格式

--------------------------------------------------------------------------------------------------------------------------------------------

因为我的需求是正数，所以，onInput这样写，根据需求自己改

onInput(value) {//Toast(value);if(value == ".") {if(this.input.indexOf('.') > 0 || this.input.length == 0) {Toast("11");} else {this.input = this.input.concat(value);Toast("22");}} else if(value == 0) {if(this.input.length === 0) {this.input = this.input.concat(value + '.');Toast("33");} else {this.input = this.input.concat(value);}} else {this.input = this.input.concat(value);Toast("44");}},

vue +element 数字键盘，vant 数字键盘使用相关推荐

vue+Element表单验证+数字英文密码和手机号验证（详细）
项目开发时需要用到表单验证,密码验证和手机验证都是使用正则表达式,特此记录一下. 1.表单图 2.代码 <template> //就是你要输入的名称< ...
vue实现自定义身份证，数字键盘（光标，输入框，键盘）
vue实现自定义身份证,数字键盘(光标,输入框,键盘) 组件介绍组件代码效果图组件使用引用使用参数介绍方法插槽组件介绍 vue实现自定义身份证键盘(光标,输入框,键盘全手写) 组件代 ...
enter对应的keycode_键盘对应数字-keycode值大全
键盘对应数字 -keycode 值大 event.keycode 值大全 1 keycode 8 = BackSpace BackSpace 2 keycode 9 = Tab Tab 3 key ...
android自定义数字键盘和字母键盘,Android自定义键盘的实现（数字键盘和字母键盘）...
Android自定义键盘的实现(数字键盘和字母键盘) 发布时间:2020-09-04 03:18:48 来源:脚本之家阅读:100 作者:浪淘沙xud 在项目中,产品对于输入方式会有特殊的要求,需要 ...
安卓键盘加上数字_Android自定义键盘的实现（数字键盘和字母键盘）
在项目中,产品对于输入方式会有特殊的要求,需要对输入方式增加特定的限制,这就需要采用自定义键盘.本文主要讲述数字键盘和字母键盘的自定义实现. 键盘效果: 自定义键盘的实现步骤如下: 自定义Custom ...
Android 自定义软键盘实现数字九宫格
前言最近项目在对接美团外卖功能实现外面小哥凭取货码取货对接完功能后用户反馈弹出的软键盘很难输入数字太小了大概是下面这种显示方式需求组长说要不搞一个自定义软键盘吧数字搞大点方便 ...
键盘右边数字键不能用，只能当方向键使用
键盘右边数字键不能用,只能当方向键使用首先排除NUMLOCK键未打开和键盘机械失灵的话 1.按左 ALT 键 + 左 SHIFT 键 + NUM LOCK 键. 2.在鼠标键信息对话框中,按 SPA ...
原生html 写输入键盘,html的原生自定义键盘（数字版）
前言: 前端现在很多时候,由于要限制文本的输入格式(这里指只允许输入数字),常常需要使用到自定义键盘.自定义键盘难免涉及到复用,资源占用等问题,有时候还会由于封装不好导致事件混乱.或者由于动画效果没实 ...
键盘乱码，对键盘和数字均乱码，但数字键打出的还是数字，字母键打出的还是字母，只是乱了的起作用~
晚上本来还想再科研一波,结果刚打开网页就发现键盘乱码了,只好求助百度,但是给出的答案大都是Fn+Num Lk,但是我的并不是打不出数字或者字母键打出数字啊,我只是数字键的数字乱了,字母键的字母乱了,并 ...
随机生成一个1 到100之间的整数，从键盘输入数字进行猜数，一共可以猜5次
9 猜数游戏,随机生成一个1 到100之间的整数,从键盘输入数字进行猜数,一共可以猜5次,如果猜小了在控制台输出猜小了,如果猜大了,在控制台输出猜大了,如果猜对了在控制台输入恭喜你猜对了,并结束游戏 ...

vue +element 数字键盘，vant 数字键盘使用

vue +element 数字键盘，vant 数字键盘使用相关推荐

最新文章

热门文章