# t-keyboard

Keyboard 键盘

t-keyboard 组件介绍

自定义键盘组件，支持车牌键盘、数字键盘、身份证键盘，提供安全的输入方式。

t-keyboard 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-keyboard 基础用法

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card title="keyboard 键盘（5.0重构为Canvas绘制）"
				class="mb-15"
				sub-title="支持车牌键盘-数字键盘-身份证键盘"></t-card>
		<t-section title="弹窗模式"
				   class="mb-15"></t-section>
		<t-cell class="mb-15 r-10"
				@click="show('car')"
				title="车牌输入(点我弹出键盘)"></t-cell>
		<t-cell class="mb-15 r-10"
				@click="show('number')"
				title="数字键盘(点我弹出键盘)"></t-cell>
		<t-cell class="mb-15 r-10"
				@click="show('idcard')"
				title="身份证键盘(点我弹出键盘)"></t-cell>

		<t-section title="嵌入模式"
				   class="mb-15"></t-section>

		<t-keyboard ref="keyboardcar"
					mode="car"
					@input="input"></t-keyboard>
		<t-keyboard ref="keyboardnumber"
					mode="number"
					@input="input"></t-keyboard>
		<t-keyboard ref="keyboardidcard"
					mode="idcard"
					@input="input"></t-keyboard>

		<t-keyboard-car class="mb-15 r-10"
						type="primary"
						@back="back"
						@input="input"></t-keyboard-car>
		<t-keyboard-number class="mb-15 r-10"
						   type="success"
						   @back="back"
						   @input="input"
						   @confirm="confirm"></t-keyboard-number>
		<t-keyboard-idcard class="mb-15 r-10"
						   type="eror"
						   @back="back"
						   @input="input"
						   @confirm="confirm"></t-keyboard-idcard>
	</view>
</template>

<script setup>
	const keyboardcar = ref<ComponentPublicInstance | null>(null)
	const keyboardnumber = ref<ComponentPublicInstance | null>(null)
	const keyboardidcard = ref<ComponentPublicInstance | null>(null)
	const confirm = () => {
		uni.showToast({
			title: 'confirm'
		})
	}

	const back = () => {
		uni.showToast({
			title: 'back'
		})
	}

	const input = (val : string) => {
		uni.showToast({
			title: val
		})
	}
	const show = (type : string) => {
		if (type == 'car') {
			keyboardcar.value?.$callMethod('show')
		}
		if (type == 'number') {
			keyboardnumber.value?.$callMethod('show')
		}
		if (type == 'idcard') {
			keyboardidcard.value?.$callMethod('show')
		}
	}
</script>

t-keyboard Props

属性名	类型	默认值	说明	可选值
size	String	"medium"	组件尺寸	large, medium, small, mini
type	String	"primary"	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	""	组件显示主题	normal, dark, light, plain
mode	String	"car"	键盘类型	car, number, idcard
value	Array	[]	默认值	-

t-keyboard Events

事件名	说明	回调参数
input	输入时触发	输入的值
back	后退时触发	-
confirm	点击确认时触发	确认的值
cancel	点击取消时触发	-
clear	清除按钮时触发	-
close	关闭时触发	-
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成触发	组件的节点信息
touchstart	触摸开始时触发	触摸事件对象
touchend	触摸结束时触发	触摸事件对象
touchmove	触摸移动时触发	触摸事件对象
touchcancel	触摸取消时触发	触摸事件对象

Methods

方法名	说明	参数	返回值
show	显示键盘	无	无
hide	隐藏键盘	无	无

Mode 说明

模式	说明
car	车牌键盘，支持输入车牌号码
number	数字键盘，支持输入数字
idcard	身份证键盘，支持输入身份证号码