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

目录

基本使用

#隐藏键盘”.”符号

#是否打乱按键的顺序

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

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

API

#Props

#Events

#Slot

基本使用

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

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

打开export default {data() {return {show: false}}}

#隐藏键盘”.”符号

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

#是否打乱按键的顺序

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

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

export default {onReady() {// 如果想一进入页面就打开键盘，请在此生命周期调用this.show = true;},onLoad() {// 不应在此调用，因为此时u-keyboard组件尚未创建完成// this.show = true;}}

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

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

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

export default {data() {return {value: '',show: false}},methods: {// 按键被点击(点击退格键不会触发此事件)valChange(val) {// 将每次按键的值拼接到value变量中，注意+=写法this.value += val;console.log(this.value);},// 退格键被点击backspace() {// 删除value的最后一个字符if(this.value.length) this.value = this.value.substr(0, this.value.length - 1);console.log(this.value);}}}

API

#Props

#Events

#Slot