vue-keyboard-number

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提出，我会在线解答。