uv-ui

# Keyboard 键盘

✈

组件名：uv-keyboard

点击下载&安装 (opens new window)

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

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √ √ √

# 基本使用

通过mode参数定义键盘的类型，通过ref调用open()控制组件的打开和关闭：

  • mode = "car" (默认值)为汽车键盘，此时顶部工具条中间的提示文字为"车牌号键盘"
  • mode = "number"为数字键盘，此时顶部工具条中间的提示文字为"数字键盘"
  • mode = "card" 为身份证键盘，此时顶部工具条中间的提示文字为"身份证键盘"
<template>
	<view>
		<uv-keyboard ref="keyboard" mode="car" @change="change" @confirm="confirm"></uv-keyboard>
		<button @click="open">打开</button>
	</view>
</template>
<script>
	export default {
		methods: {
			open() {
				this.$refs.keyboard.open();
			},
			change(e) {
				console.log('change', e)
			},
			confirm() {
				console.log('confirm')
			}
		}
	}
</script>

# 隐藏键盘"."符号

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

# 是否打乱按键的顺序

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

<uv-keyboard ref="keyboard" mode="number" random></uv-keyboard>

# 监听键盘按键被点击

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

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

<template>
	<view>
		<uv-keyboard ref="keyboard" mode="number" @change="change" @backspace="backspace"></uv-keyboard>
		<button @click="open">打开</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value: ''
			}
		},
		methods: {
			open() {
				this.$refs.keyboard.open();
			},
			// 按键被点击(点击退格键不会触发此事件)
			change(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>

# 车牌键盘自定义中英文切换及禁用键等设置

  • 通过 disKeys 属性设置禁用的键，如：['京',2,'Q','X']
  • 通过ref方法 changeCarMode 可以切换中英文模式
  • 通过 @changeCarInputMode 回调方法可以获取是否处于英文状态模式，这里的作用是自定义中英文部分的内容
  • 通过 customabc 属性开启自定义切换按键内容，为了兼容部分小程序
<template>
	<view>
		<uv-keyboard 
		ref="keyboard" 
		mode="car" 
		customabc 
		:disKeys="['京',2,'Q','X']" 
		@change="change" 
		@confirm="confirm" 
		@changeCarInputMode="changeCarInputMode"
	>
			<template v-slot:abc>
				<text v-if="isABC">省份</text>
				<text v-else>ABC</text>
			</template>
		</uv-keyboard>
		<button @click="open">打开</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isABC: false
			}
		},
		methods: {
			open() {
				this.$refs.keyboard.open();
				// setTimeout(()=>{
				// 	this.$refs.keyboard.changeCarMode();
				// },1000)
			},
			change(e) {
				console.log('change', e)
			},
			confirm() {
				console.log('confirm')
			},
			changeCarInputMode(e) {
				this.isABC = e;
			}
		}
	}
</script>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# Keyboard Props

参数 说明 类型 默认值 可选值
mode 键盘的类型，number - 数字键盘，card - 身份证键盘，car - 车牌号键盘 String car car | number | card
dotDisabled 是否显示"."按键，只在mode="number"时有效 Boolean false true | false
tooltip 是否显示键盘顶部工具条 Boolean true true | false
showTips 是否显示工具条中间的提示 Boolean true true | false
tips 工具条中间的提示文字 String - -
showCancel 是否显示工具条左边的"取消"按钮 Boolean true true | false
showConfirm 是否显示工具条右边的"完成"按钮 Boolean true true | false
random 是否打乱键盘按键的顺序 Boolean false true | false
safeAreaInsetBottom 是否开启底部安全区适配 Boolean false true | false
closeOnClickOverlay 是否允许点击遮罩收起键盘 Boolean true true | false
closeOnClickConfirm 是否允许点击确认按钮收起键盘 Boolean true true | false
overlay 是否显示遮罩 Boolean true true | false
zIndex 弹出键盘的z-index值 String | Number 1075 -
confirmText 确认按钮的文字 String 确认 -
cancelText 取消按钮的文字 String 取消 -
autoChange mode = "car"下，输入文字后，是否自动切换为字母模式 Boolean false true | false
disKeys mode = "car"下，被禁用的键，如：['I','O'] Array - -
customabc mode = "car"下，是否启用自定义中英文切换内容模式，为了兼容支付宝等小程序不兼容嵌套插槽，导致同时显示自定义内容和原始内容 Array - -
customStyle 自定义外部样式 Object {} -

# Keyboard Methods

方法名 说明
open 弹出键盘组件
close 关闭键盘组件
changeCarMode mode = "car"下， 调用此方法可以切换中英文模式

# Keyboard Events

事件名 说明 回调参数
@change 按键被点击(不包含退格键被点击) 按键的值，见上方说明和示例
@close 键盘关闭 -
@confirm 键盘顶部工具条右边的"完成"按钮被点击 -
@cancel 键盘顶部工具条左边的"取消"按钮被点击 -
@backspace 键盘退格键被点击 -
@changeCarInputMode mode = "car"下，调用此方法可以进行切换中英文 返回true - 英文模式；false - 中文模式

# Keyboard slots

名称 说明
abc mode = "car"下，自定义中英文切换内容，具体使用参考上面示例

← Rate 评分 →