此为uView自定义的键盘面板,内含了数字键盘,车牌号键,身份证号键盘3种模式,都有可以打乱按键顺序的选项。
#平台差异说明
App(vue) | App(nvue) | H5 | 小程序 |
---|---|---|---|
√ | √ | √ | √ |
#基本使用
通过mode
参数定义键盘的类型,show
绑定一个值为布尔值的变量控制键盘的弹出与收起:
-
mode = car (默认值)为汽车键盘,此时顶部工具条中间的提示文字为"车牌号键盘"
-
mode = number为数字键盘,此时顶部工具条中间的提示文字为"数字键盘"
-
mode = card 为身份证键盘,此时顶部工具条中间的提示文字为"身份证键盘"
<template> <view> <u-keyboard ref="uKeyboard" mode="car" :show="show"></u-keyboard> <u-button @click="show = true">打开</u-button> </view> </template> <script> export default { data() { return { show: false } } } </script>
copy
#隐藏键盘"."符号
-
通过
dotDisabled
参数配置是否显示键盘"."符号,默认为false
,只在"mode = number"时生效<u-keyboard mode="number" :dotDisabled="true"></u-keyboard>
copy
#是否打乱按键的顺序
如果配置random
参数为true
的话,每次打开键盘,按键的顺序都是随机的,该功能默认是关闭的
<u-keyboard ref="uKeyboard" mode="number" :random="true" :show="show"></u-keyboard>
copy
#如何控制键盘的打开和关闭?
<template>
<u-keyboard mode="number" :show="show"></u-keyboard>
</template>
<script>
export default {
onReady() {
// 如果想一进入页面就打开键盘,请在此生命周期调用
this.show = true;
},
onLoad() {
// 不应在此调用,因为此时u-keyboard组件尚未创建完成
// this.show = true;
}
}
</script>
copy
#如何监听键盘按键被点击?
- 输入值是通过组件的
change
事件实现的,组件内部每个按键被点击的时候,组件就会发出一个change
事件,回调参数为点击的按键的值。 - 通过
backspace
事件监听键盘退格键的点击,通过修改父组件的值实现退格的效果,见下方示例
注意:点击退格键(也即删除键)不会触发change
事件
<template>
<u-keyboard mode="number" @change="valChange" @backspace="backspace" :show="show"></u-keyboard>
</template>
<script>
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);
}
}
}
</script>