aida_front/src/component/LoginPage/verificationCodeInput.vue

<template>
	<div id="app">
		<div class="captcha">
			<input
				v-for="(c, index) in getCtData"
				:key="index"
				type="text"
				v-model="getCtData[index]"
				ref="input"
				inputmode="numeric"
				pattern="[0-9]*"
				@input="(e) => onInput(e.target.value, index)"
				@keydown="(e) => onKeydown(e, index)"
				@keypress="(e) => onKeypress(e)"
				@focus="onFocus"
				@pause="onPause"
				:disabled="loading"
			/>
		</div>
	</div>
</template>
<script>
	import { defineComponent } from "vue";

	export default defineComponent({
		props: ["ct"],
		data() {
			return {
				loading: false,
				timeout: null,
			};
		},
		computed: {
			getCtData() {
				return this.ct;
			},
			ctSize() {
				return this.getCtData.length;
			},
			cIndex() {
				let i = this.getCtData.findIndex((item) => item === "");
				i = (i + this.ctSize) % this.ctSize;
				return i;
			},
			lastCode() {
				return this.getCtData[this.ctSize - 1];
			},
		},
		watch: {
			cIndex() {
				this.resetCaret();
			},
			lastCode(newVal, oldVal) {
				if (newVal && newVal != oldVal) {
					this.$refs.input[this.ctSize - 1].blur();
					this.sendCaptcha();
				}
			},
		},
		mounted() {
			this.resetCaret();
		},
		methods: {
			onInput(val, index) {
				clearTimeout(this.timeout);
				this.timeout = setTimeout(() => {
					// val = val.replace(/[^0-9]/g, '');
					val = String(val).replace(/\D/g, "");
					this.getCtData[index] = val;
					if (index == this.ctSize - 1) {
						this.getCtData[this.ctSize - 1] = val[0]; // 最后一个码，只允许输入一个字符。
					} else if (val.length > 1) {
						let i = index;
						for (
							i = index;
							i < this.ctSize && i - index < val.length;
							i++
						) {
							this.getCtData[i] = val[i];
						}
						this.resetCaret();
					} else if (!(val + "")) {
						this.getCtData[index] = "";
					}
				}, 10);
			},
			onPause() {},
			// 重置光标位置。
			resetCaret() {
				this.$refs.input[this.ctSize - 1].focus();
			},
			onFocus() {
				// 监听 focus 事件，将光标重定位到“第一个空白符的位置”。
				let index = this.getCtData.findIndex((item) => item === "");
				index = (index + this.ctSize) % this.ctSize;
				this.$refs.input[index].focus();
			},
			onKeypress(e) {
				// 只允许输入数字0-9
				const char = String.fromCharCode(e.which);
				if (!/[0-9]/.test(char)) {
					e.preventDefault();
				}
			},
			onKeydown(e, index) {
				// 处理删除键
				if (e.key === "Backspace" || e.key === "Delete") {
					const val = e.target.value;
					if (val === "") {
						// 删除上一个input里的值，并对其focus。
						if (index > 0) {
							this.getCtData[index - 1] = "";
							this.$refs.input[index - 1].focus();
						}
					}
				}
				// 阻止其他非数字字符
				else if (
					e.key &&
					!/[0-9]/.test(e.key) &&
					![
						"Backspace",
						"Delete",
						"Tab",
						"Enter",
						"ArrowLeft",
						"ArrowRight",
						"ArrowUp",
						"ArrowDown",
					].includes(e.key)
				) {
					e.preventDefault();
				}
			},

			sendCaptcha() {
				let password = this.getCtData.map((item) => item).join("");
				this.$emit("sendCaptcha", password);
			},

			reset() {
				// 重置。一般是验证码错误时触发。
				this.getCtData = this.getCtData.map((item) => "");
				this.resetCaret();
			},
		},
	});
</script>

<style scoped lang="less">
	.captcha {
		display: flex;
		justify-content: space-between;
	}
	input {
		width: 8.7rem;
		height: 8.7rem;
		border: 0.1rem solid #b4bed7;
		border-radius: 2rem;
		text-align: center;
		font-size: 2.4rem;
		line-height: 8.7rem;
		outline: none;
		@media (max-width: 767px) {
			border-radius: .7rem;
			width: 3.5rem;
			height: 3.5rem;
			font-size: 1.8rem;
			line-height: 3.5rem;
		}
	}
	input:last-of-type {
		margin-right: 0;
	}
	input:disabled {
		color: #000;
		background-color: #fff;
	}
	.msg {
		text-align: center;
	}
</style>