Skip to content
官方QQ交流群
pc端ui:468705115   点此加入
移动端ui:468217742   点此加入
技术交流1:87208295   点此加入
技术交流2:787747122   点此加入
官网
云控制台
开放平台
关注微信公众号
代码仓库: 码云

Keyboard 键盘

此为uView自定义的键盘面板,内含了数字键盘,车牌号键,身份证号键盘3种模式,都有可以打乱按键顺序的选项。

平台差异说明

App(vue)App(nvue)H5小程序

基本使用

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

  • mode = car (默认值)为汽车键盘,此时顶部工具条中间的提示文字为"车牌号键盘"
  • mode = number为数字键盘,此时顶部工具条中间的提示文字为"数字键盘"
  • mode = card 为身份证键盘,此时顶部工具条中间的提示文字为"身份证键盘"
html
<template>
	<view>
		<up-keyboard ref="uKeyboard" mode="car" :show="show"></up-keyboard>
		<up-button @click="show = true">打开</up-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		}
	}
</script>

隐藏键盘"."符号

  • 通过dotDisabled参数配置是否显示键盘"."符号,默认为false,只在"mode = number"时生效
html
<up-keyboard mode="number" :dotDisabled="true"></up-keyboard>

是否打乱按键的顺序

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

html
<up-keyboard ref="uKeyboard" mode="number" :random="true" :show="show"></up-keyboard>

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

html
<template>
	<up-keyboard mode="number" :show="show"></up-keyboard>
</template>

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

如何监听键盘按键被点击?

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

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

html
<template>
	<up-keyboard mode="number" @change="valChange" @backspace="backspace" :show="show"></up-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>

此页面源代码地址

页面源码地址


 github  gitee

API

Props

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

Events

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

Slot

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

Copyright © 2017 10yun.com | 十云提供计算服务-IPV6 | ctocode组开发