Skip to content

n-keyboard-number 数字键盘 ​

底部弹层形态的虚拟数字键盘(遮罩 + 底部面板 + 按键网格),用于支付金额、验证码、身份证号等不想调起系统输入法的录入场景。

  1. 值双通道(与 n-input 同构):绑 v-model 时按键自动拼接、退格自动去尾、超 maxlength 不拼接(input 事件仍上报);不绑 v-model 也可只用 input/delete 语义事件自行拼值。maxlength 是组件不变量:运行中收紧上限或外部写入超限值时,组件自动截断收敛并回写 v-model(-1 不限)
  2. 受控显隐:visible 置 true 打开;组件不自行收起——点遮罩/关闭按钮派发 close、点完成派发 complete,隐藏由使用者在回调里把 visible 改回 false
  3. 功能键文案(删除/完成)随库语言包走;数字与 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) 事件对象

记录 · 思考 · 创作