数字键盘

keyboard 数字键盘,例子包括6位数和4位数输入,长度动态传入,结合keyboard-input使用

组件结构

<template>
	<view>
		<view class="tui-keyboard-mask" :class="[show?'tui-mask-show':'']" v-if="mask" @tap="handleClose"></view>
		<view class="tui-keyboard" :class="{'tui-keyboard-radius':radius,'tui-keyboard-action':action,'tui-keyboard-show':show}">
			<slot></slot>
			<view class="tui-keyboard-grids">
				<!--{{(index==9 || index==10 || index==11)?'tui-grid-bottom':''}}-->
				<view class="tui-keyboard-grid" :class="{'tui-bg-gray':index==9 || index==11}" v-for="(item,index) in itemList"
				 :key="index" hover-class="tui-keyboard-hover" :hover-stay-time="150" @tap="handleClick" :data-index="index">
					<view v-if="index<11" class="tui-keyboard-item" :class="{'tui-fontsize-32':index==9}">{{getKeyBoard(index,action)}}</view>
					<view v-else class="tui-keyboard-item">
						<view class="tui-icon tui-keyboard-delete"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

组件脚本

<script>
	export default {
		name: "tuiKeyboard",
		props: {
			//是否需要mask
			mask: {
				type: Boolean,
				default: true
			},
			//控制键盘显示
			show: {
				type: Boolean,
				default: false
			},
			//是否直接显示,不需要动画,一般使用在锁屏密码
			action: {
				type: Boolean,
				default: true
			},
			//是否带圆角
			radius: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				itemList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
			};
		},
		methods: {
			getKeyBoard: function(index, action) {
				var content = index + 1;
				if (index == 9) {
					content = action ? "取消" : "清除";
				} else if (index == 10) {
					content = 0;
				}
				return content;
			},
			//关闭
			handleClose() {
				if (!this.show) {
					return;
				}
				this.$emit('close', {});
			},
			handleClick(e) {
				if (!this.show) {
					return;
				}
				const dataset = e.currentTarget.dataset;
				this.$emit('click', {
					index: Number(dataset.index)
				})
			}
		}
	}
</script>

组件样式

... 此处省略n行

脚本说明

props

参数 类型 描述 默认值
mask Boolean 是否需要mask true
show Boolean 控制键盘显示 false
action Boolean 是否直接显示,不需要动画,一般使用在锁屏密码 true
radius Boolean 是否带圆角 false

methods

名称 描述
@close 关闭键盘
@click 键盘点击事件

示例

H5预览地址

https://www.thorui.cn/h5/#/pages/extend/keyboard/keyboard

H5二维码

小程序二维码