Keyboard 键盘

TKeyboard 虚拟键盘输入的组件，支持配置键盘类型、模式等。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title="键盘" class="p.30">
		<t-card title="Keyboard 键盘" class="mb.30" sub-title="支持车牌键盘-数字键盘-身份证键盘"></t-card>
		<t-cell class="mb.30-tdr" @click="show('car')" title="车牌输入(点我弹出键盘)"></t-cell>
		<t-keybord-car class="mb.30"></t-keybord-car>
		<t-cell class="mb.30-tdr" @click="show('number')" title="数字键盘(点我弹出键盘)"></t-cell>
		<t-keybord-number class="mb.30"></t-keybord-number>
		<t-cell class="mb.30-tdr" @click="show('idcard')" title="身份证键盘(点我弹出键盘)"></t-cell>
		<t-keybord-idcard class="mb.30"></t-keybord-idcard>
		<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-page>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			confirm(e : string[]) {
				console.log(e)
				uni.showToast({
					title: e.join('')
				})
			},
			show(type : string) {
				(this.$refs[`keyboard${type}`] as ComponentPublicInstance).$callMethod('show')
			},
			back() {
				uni.showToast({
					title: 'back'
				})
			},
			input(val : string) {
				uni.showToast({
					title: val
				})
			}
		}
	}
</script>

Props

名称	描述	类型	默认值
type	键盘类型	String	'p'
mode	键盘模式	String	'car'
value	键盘初始值	String[]	[]
inactiveColor	键盘未激活时的颜色	String	'#E4E7ED'
activeColor	键盘激活时的颜色	String	''

Events

事件名	描述	回调参数
cancel	取消事件
clear	清空事件
confirm	确认事件
input	输入事件	(e: string)
back	回退事件
close	关闭事件

Slots

名称	描述
-	-

Methods

方法名	描述	参数
updateValueDom	更新值DOM	(cur: number, val: string)
updateDom	更新DOM	(cur: number, state: boolean)
show	显示键盘