# t-keyboard-idcard

KeyboardIdcard 身份证键盘

t-keyboard-idcard 组件介绍

t-keyboard-idcard 基于 Canvas 绘制的身份证专用键盘，支持数字输入和 X 字符，右侧带有确认和退格按钮，适用于身份证号输入场景。

t-keyboard-idcard 平台兼容

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

t-keyboard-idcard 基础用法

基础用法参考 demo/keyboard/keyboard.uvue。

<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-idcard Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	'primary'
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'

t-keyboard-idcard Events

事件名	说明	回调参数
input	输入时触发	string（输入的字符）
back	点击退格时触发	-
confirm	点击确认按钮时触发	-