vue-number-keyboard

vue-number-keyboard是基于VUE实现的数字键盘插件，当前支持整数、小数数字输入、乱序键盘，demo中给出了常用的验证码、金额数字示例。数字键盘的大小包括字体尺寸支持响应式。

查看DEMO

运行项目

clone项目到本地，进入项目文件夹，安装依赖

git clone https://github.com/yujinjin/vue-number-keyboard.git
cd loading
npm install

运行demo，会自动打开浏览器地址运行

npm run demo

编译打包项目

npm run compile

NPM

npm install vue-number-keyboard

依赖

• VUE

使用

作为插件

import Vue from 'vue'
import numberKeyboard from '../dist/vue-number-keyboard.js'
import "../dist/vue-number-keyboard.css"

// VUE use
Vue.use(numberKeyboard);

可配置属性选项

名称 | 描述 | 默认值 | 可选项 ---|---|---|--- value | 双向绑定值，用于显示或隐藏数字键盘 | false | Boolean disorder | 数字键盘是否乱序，常用于密码输入 | false | Boolean styleName | 数字键盘风格 | 'popular' | simple（无确认键和小数点，一般用于密码或验证码输入）、popular（有确认键和小数点，一般用于价格或金额输入） confirmText | 键盘确认键文案 | '确定' | String isInteger | 是否是整数 | false | Boolean

示例

1. 货币金额

<number-keyboard v-model="isShowAmountKeyboard" @delete="withdrawAmount ? (withdrawAmount = withdrawAmount.substring(0, withdrawAmount.length - 1)) : ''" @keyDown="withdrawAmountInput"></number-keyboard>

示例：

2. 验证码

<number-keyboard :isInteger="true" @confirm="save" v-model="isShowVerificationCodeKeyboard" @keyDown="verificationCodeInput" @delete="validateCode ? (validateCode = validateCode.substring(0, validateCode.length - 1)) : ''"></number-keyboard>

示例：

3. 密码输入（数字乱序）

网络请求超时，轻触自动刷新。默认实例方法有三个参数，也可以一个都不穿。默认三个参数：isShowMask = true, autoRefresh=true, indicatorText="网络请求超时啦，轻触自动刷新"

<number-keyboard :isInteger="true" :disorder="true" v-model="isShowPasswordKeyboard" @keyDown="passwordInput" @delete="password ? (validateCode = password.substring(0, password.length - 1)) : ''"></number-keyboard>

示例：

最后

• 如果喜欢一定要 star哈!!!（谢谢!!）

• 如果有意见和问题 请在 lssues提出，我会在线解答。