u-car-keyboard.vue

<template>
	<view
		class="u-keyboard"
		@touchmove.stop.prevent="noop"
	>
		<view
			v-for="(group, i) in abc ? engKeyBoardList : areaList"
			:key="i"
			class="u-keyboard__button"
			:index="i"
			:class="[i + 1 === 4 && 'u-keyboard__button--center']"
		>
			<view
				v-if="i === 3"
				class="u-keyboard__button__inner-wrapper"
			>
				<view
					class="u-keyboard__button__inner-wrapper__left"
					hover-class="u-hover-class"
					:hover-stay-time="200"
					@tap="changeCarInputMode"
				>
					<text
						class="u-keyboard__button__inner-wrapper__left__lang"
						:class="[!abc && 'u-keyboard__button__inner-wrapper__left__lang--active']"
					>中</text>
					<text class="u-keyboard__button__inner-wrapper__left__line">/</text>
					<text
						class="u-keyboard__button__inner-wrapper__left__lang"
						:class="[abc && 'u-keyboard__button__inner-wrapper__left__lang--active']"
					>英</text>
				</view>
			</view>
			<view
				class="u-keyboard__button__inner-wrapper"
				v-for="(item, j) in group"
				:key="j"
			>
				<view
					class="u-keyboard__button__inner-wrapper__inner"
					:hover-stay-time="200"
					@tap="carInputClick(i, j)"
					hover-class="u-hover-class"
				>
					<text class="u-keyboard__button__inner-wrapper__inner__text">{{ item }}</text>
				</view>
			</view>
			<view
				v-if="i === 3"
				@touchstart="backspaceClick"
				@touchend="clearTimer"
				class="u-keyboard__button__inner-wrapper"
			>
				<view
					class="u-keyboard__button__inner-wrapper__right"
					hover-class="u-hover-class"
					:hover-stay-time="200"
				>
					<u-icon
						size="28"
						name="backspace"
						color="#303133"
					></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import props from './props.js';
	/**
	 * keyboard 键盘组件
	 * @description 此为uView自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3种模式，都有可以打乱按键顺序的选项。
	 * @tutorial https://uviewui.com/components/keyboard.html
	 * @property {Boolean} random 是否打乱键盘的顺序
	 * @event {Function} change 点击键盘触发
	 * @event {Function} backspace 点击退格键触发
	 * @example <u-keyboard ref="uKeyboard" mode="car" v-model="show"></u-keyboard>
	 */
	export default {
		name: "u-keyboard",
		mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
		data() {
			return {
				// 车牌输入时，abc=true为输入车牌号码，bac=false为输入省份中文简称
				abc: false
			};
		},
		computed: {
			areaList() {
				let data = [
					'京',
					'沪',
					'粤',
					'津',
					'冀',
					'豫',
					'云',
					'辽',
					'黑',
					'湘',
					'皖',
					'鲁',
					'苏',
					'浙',
					'赣',
					'鄂',
					'桂',
					'甘',
					'晋',
					'陕',
					'蒙',
					'吉',
					'闽',
					'贵',
					'渝',
					'川',
					'青',
					'琼',
					'宁',
					'挂',
					'藏',
					'港',
					'澳',
					'新',
					'使',
					'学'
				];
				let tmp = [];
				// 打乱顺序
				if (this.random) data = uni.$u.randomArray(data);
				// 切割成二维数组
				tmp[0] = data.slice(0, 10);
				tmp[1] = data.slice(10, 20);
				tmp[2] = data.slice(20, 30);
				tmp[3] = data.slice(30, 36);
				return tmp;
			},
			engKeyBoardList() {
				let data = [
					1,
					2,
					3,
					4,
					5,
					6,
					7,
					8,
					9,
					0,
					'Q',
					'W',
					'E',
					'R',
					'T',
					'Y',
					'U',
					'I',
					'O',
					'P',
					'A',
					'S',
					'D',
					'F',
					'G',
					'H',
					'J',
					'K',
					'L',
					'Z',
					'X',
					'C',
					'V',
					'B',
					'N',
					'M'
				];
				let tmp = [];
				if (this.random) data = uni.$u.randomArray(data);
				tmp[0] = data.slice(0, 10);
				tmp[1] = data.slice(10, 20);
				tmp[2] = data.slice(20, 30);
				tmp[3] = data.slice(30, 36);
				return tmp;
			}
		},
		methods: {
			// 点击键盘按钮
			carInputClick(i, j) {
				let value = '';
				// 不同模式，获取不同数组的值
				if (this.abc) value = this.engKeyBoardList[i][j];
				else value = this.areaList[i][j];
				// 如果允许自动切换，则将中文状态切换为英文
				if (!this.abc && this.autoChange) uni.$u.sleep(200).then(() => this.abc = true)
				this.$emit('change', value);
			},
			// 修改汽车牌键盘的输入模式，中文|英文
			changeCarInputMode() {
				this.abc = !this.abc;
			},
			// 点击退格键
			backspaceClick() {
				this.$emit('backspace');
				clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
				this.timer = null;
				this.timer = setInterval(() => {
					this.$emit('backspace');
				}, 250);
			},
			clearTimer() {
				clearInterval(this.timer);
				this.timer = null;
			},
		}
	};
</script>

<style lang="scss" scoped>
	@import "../../libs/css/components.scss";
	$u-car-keyboard-background-color: rgb(224, 228, 230) !default;
	$u-car-keyboard-padding:6px 0 6px !default;
	$u-car-keyboard-button-inner-width:64rpx !default;
	$u-car-keyboard-button-inner-background-color:#FFFFFF !default;
	$u-car-keyboard-button-height:80rpx !default;
	$u-car-keyboard-button-inner-box-shadow:0 1px 0px #999992 !default;
	$u-car-keyboard-button-border-radius:4px !default;
	$u-car-keyboard-button-inner-margin:8rpx 5rpx !default;
	$u-car-keyboard-button-text-font-size:16px !default;
	$u-car-keyboard-button-text-color:$u-main-color !default;
	$u-car-keyboard-center-inner-margin: 0 4rpx !default;
	$u-car-keyboard-special-button-width:134rpx !default;
	$u-car-keyboard-lang-font-size:16px !default;
	$u-car-keyboard-lang-color:$u-main-color !default;
	$u-car-keyboard-active-color:$u-primary !default;
	$u-car-keyboard-line-font-size:15px !default;
	$u-car-keyboard-line-color:$u-main-color !default;
	$u-car-keyboard-line-margin:0 1px !default;
	$u-car-keyboard-u-hover-class-background-color:#BBBCC6 !default;

	.u-keyboard {
		@include flex(column);
		justify-content: space-around;
		background-color: $u-car-keyboard-background-color;
		align-items: stretch;
		padding: $u-car-keyboard-padding;

		&__button {
			@include flex;
			justify-content: center;
			flex: 1;
			/* #ifndef APP-NVUE */
			/* #endif */

			&__inner-wrapper {
				box-shadow: $u-car-keyboard-button-inner-box-shadow;
				margin: $u-car-keyboard-button-inner-margin;
				border-radius: $u-car-keyboard-button-border-radius;

				&__inner {
					@include flex;
					justify-content: center;
					align-items: center;
					width: $u-car-keyboard-button-inner-width;
					background-color: $u-car-keyboard-button-inner-background-color;
					height: $u-car-keyboard-button-height;
					border-radius: $u-car-keyboard-button-border-radius;

					&__text {
						font-size: $u-car-keyboard-button-text-font-size;
						color: $u-car-keyboard-button-text-color;
					}
				}

				&__left,
				&__right {
					border-radius: $u-car-keyboard-button-border-radius;
					width: $u-car-keyboard-special-button-width;
					height: $u-car-keyboard-button-height;
					background-color: $u-car-keyboard-u-hover-class-background-color;
					@include flex;
					justify-content: center;
					align-items: center;
					box-shadow: $u-car-keyboard-button-inner-box-shadow;
				}

				&__left {
					&__line {
						font-size: $u-car-keyboard-line-font-size;
						color: $u-car-keyboard-line-color;
						margin: $u-car-keyboard-line-margin;
					}

					&__lang {
						font-size: $u-car-keyboard-lang-font-size;
						color: $u-car-keyboard-lang-color;

						&--active {
							color: $u-car-keyboard-active-color;
						}
					}
				}
			}
		}
	}

	.u-hover-class {
		background-color: $u-car-keyboard-u-hover-class-background-color;
	}
</style>