uview-plus

# Keyboard 键盘

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

# 平台差异说明

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

# 基本使用

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

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

<script setup>
import { ref } from 'vue';

const show = ref(false);
</script>

<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"时生效
<up-keyboard mode="number" :dotDisabled="true"></up-keyboard>

# 是否打乱按键的顺序

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

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

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

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

<script setup>
import { ref } from 'vue';
import { onReady, onLoad } from '@dcloud/uniapp';

const show = ref(false);

onReady(() => {
  // 如果想一进入页面就打开键盘，请在此生命周期调用
  show.value = true;
});

onLoad(() => {
  // 不应在此调用，因为此时u-keyboard组件尚未创建完成
  // show.value = true;
});
</script>


<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事件

<template>
	<up-keyboard mode="number" @change="valChange" @backspace="backspace" :show="show"></up-keyboard>
</template>

<script setup>
import { ref } from 'vue';

const value = ref(''); // 输入框的值
const show = ref(false); // 是否显示键盘

const valChange = (val) => {
  // 将每次按键的值拼接到value变量中，注意+=写法
  value.value += val;
  console.log(value.value);
};

const backspace = () => {
  // 删除value的最后一个字符
  if (value.value.length) {
    value.value = value.value.substr(0, value.value.length - 1);
  }
  console.log(value.value);
};
</script>

<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-车牌号键盘 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 验证码输入组件实现类似支付宝输入密码时，上方显示输入内容的功能 -

← Picker 选择器 →