uniapp中的uview组件库丰富的Keyboard 键盘 用法

目录

基本使用

#隐藏键盘"."符号

#是否打乱按键的顺序

#如何控制键盘的打开和关闭？

#如何监听键盘按键被点击？

API

#Props

#Events

#Slot

---

基本使用

通过mode参数定义键盘的类型，show绑定一个值为布尔值的变量控制键盘的弹出与收起：

• mode = car (默认值)为汽车键盘，此时顶部工具条中间的提示文字为"车牌号键盘"
• mode = number为数字键盘，此时顶部工具条中间的提示文字为"数字键盘"
• mode = card 为身份证键盘，此时顶部工具条中间的提示文字为"身份证键盘"

#隐藏键盘"."符号

• 通过dotDisabled参数配置是否显示键盘"."符号，默认为false，只在"mode = number"时生效

#是否打乱按键的顺序

如果配置random参数为true的话，每次打开键盘，按键的顺序都是随机的，该功能默认是关闭的

#如何控制键盘的打开和关闭？

#如何监听键盘按键被点击？

• 输入值是通过组件的change事件实现的，组件内部每个按键被点击的时候，组件就会发出一个change事件，回调参数为点击的按键的值。
• 通过backspace事件监听键盘退格键的点击，通过修改父组件的值实现退格的效果，见下方示例

注意：点击退格键(也即删除键)不会触发change事件

API

#Props

参数	说明	类型	默认值	可选值
mode	键盘的类型，number-数字键盘，card-身份证键盘，car-车牌号键盘	String	car	number / card
dotDisabled	是否显示"."按键，只在mode=number时有效	Boolean	false	true
tooltip	是否显示键盘顶部工具条	Boolean	true	false
showTips	是否显示工具条中间的提示	Boolean	true	false
tips	工具条中间的提示文字，见上方基本使用的说明	String	-	-
showCancel	是否显示工具条左边的"取消"按钮	Boolean	true	false
showConfirm	是否显示工具条右边的"完成"按钮	Boolean	true	false
random	是否打乱键盘按键的顺序	Boolean	false	true
safeAreaInsetBottom	是否开启底部安全区适配	Boolean	false	true
closeOnClickOverlay	是否允许点击遮罩收起键盘（注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调）	Boolean	true	false
show	控制键盘的弹出与收起	Boolean	true	false
overlay	是否显示遮罩	Boolean	true	false
zIndex	弹出键盘的z-index值	String | Number	1075	-
confirmText	确认按钮的文字	String	确认	-
cancelText	取消按钮的文字	String	取消	-
customStyle	自定义样式，对象形式	Object	{}	-
autoChange	mode为car下，输入文字后，是否自动切换为字母模式	Boolean	false	true

#Events

事件名	说明	回调参数	版本
change	按键被点击(不包含退格键被点击)	按键的值，见上方说明和示例	-
close	键盘关闭	-	-
confirm	键盘顶部工具条右边的"完成"按钮被点击	-	-
cancel	键盘顶部工具条左边的"取消"按钮被点击	-	-
backspace	键盘退格键被点击	-	-

#Slot

名称	说明	版本
default	内容将会显示键盘的工具条上面，可以结合MessageInput 验证码输入组件实现类似支付宝输入密码时，上方显示输入内容的功能	-