vue-number-keyboard
vue-number-keyboard是基于VUE实现的数字键盘插件，当前支持整数、小数数字输入、乱序键盘，demo中给出了常用的验证码、金额数字示例。数字键盘的大小包括字体尺寸支持响应式。
运行项目
clone项目到本地，进入项目文件夹，安装依赖
git clone https://github.com/yujinjin/vue-number-keyboard.git
cd loading
npm install运行demo，会自动打开浏览器地址运行
npm run demo编译打包项目
npm run compileNPM
npm install vue-number-keyboard依赖
- VUE
使用
作为插件
import Vue from 'vue'
import numberKeyboard from 'vue-number-keyboard'
import "vue-number-keyboard/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. 密码输入（数字乱序）
<number-keyboard :isInteger="true" :disorder="true" v-model="isShowPasswordKeyboard" @keyDown="passwordInput" @delete="password ? (validateCode = password.substring(0, password.length - 1)) : ''"></number-keyboard>示例：
最后
-
如果喜欢一定要 star哈!!!（谢谢!!）
-
如果有意见和问题 请在 lssues提出，我会在线解答。