n-keyboard-number 数字键盘
底部弹层形态的虚拟数字键盘(遮罩 + 底部面板 + 按键网格),用于支付金额、验证码、身份证号等不想调起系统输入法的录入场景。
- 值双通道(与 n-input 同构):绑 v-model 时按键自动拼接、退格自动去尾、超 maxlength 不拼接(input 事件仍上报);不绑 v-model 也可只用 input/delete 语义事件自行拼值。maxlength 是组件不变量:运行中收紧上限或外部写入超限值时,组件自动截断收敛并回写 v-model(-1 不限)
- 受控显隐:
visible置 true 打开;组件不自行收起——点遮罩/关闭按钮派发close、点完成派发complete,隐藏由使用者在回调里把visible改回 false- 功能键文案(删除/完成)随库语言包走;数字与 X 是字符本身,不参与多语言
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
API
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| visible | 显隐开关(受控模式:打开后组件不自行收起,隐藏由使用者在回调里改回 false) | Boolean | false | - |
| model-value | 已输入值(v-model):绑定时按键自动拼接/退格去尾,超 maxlength 不拼接但仍上报 input | String | "" | - |
| maxlength | 已输入值长度上限(超限后按键不再拼接,input 事件仍上报),-1 = 不限;验证码建议 6、身份证 18 | Number | -1 | - |
| mode | 键盘模式:number = 纯数字(验证码/编号);digit = 数字 + 小数点(金额/数量);idcard = 数字 + X(身份证号末位校验码),取值与 uni-app input 的 type 同义 | String | number | number<br/>digit<br/>idcard |
| random-key | 每次打开时打乱数字键位(0-9 位置随机,小数点/X/"00" 固定在末行),防窥场景用 | Boolean | false | - |
| double-zero | number 模式末行左侧显示 "00" 快捷键(点击上报 input 事件携带 "00");false 时 0 键占满整行;仅 number 模式生效 | Boolean | false | - |
| title | 标题栏文字(如 "请输入金额"),空串 = 不渲染标题栏 | String | "" | - |
| show-close | 标题栏右侧显示关闭按钮(点击派发 close 事件;无标题时标题栏只渲染该按钮) | Boolean | false | - |
| close-on-mask | 点击遮罩派发 close 事件;关闭后遮罩点击无响应,只能经完成键/关闭按钮退出 | Boolean | true | - |
| complete-text | 完成键文案(支付等场景传 "支付"),空串 = 用库内置文案(随库语言包) | String | "" | - |
| custom-class | 挂到根节点的额外 class(类需定义在组件样式表内) | String | "" | - |
| custom-style | 根节点行内样式(根节点是弹层全屏透明层,调 z-index 等场景使用) | String | "" | 与 css 相同 |
| panel-style | 微调底部面板的行内样式,如 "background-color:#111111" | String | "" | 与 css 相同 |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:model-value | 按键拼接/退格去尾后的新值(v-model 通道,超限不拼接时不发) | 新值字符串 |
| input | 点击数字/小数点/X/"00" 键时触发 | 键值字符(如 "7"、"."、"X"、"00") |
| delete | 点击删除键时触发(v-model 值已自动去尾;纯事件用法自行去位) | 事件对象 |
| close | 点击遮罩(closeOnMask 开启时)或标题栏关闭按钮时触发 | - |
| complete | 点击完成键时触发(组件不自行收起,隐藏由使用者改 visible) | 事件对象 |