验证码防抖

src/component/LoginPage/verificationCodeInput.vue

@@ -1,85 +1,99 @@
 <template>
 	<div id="app">
 		<div class="captcha">
-      <input v-for="(c, index) in getCtData" :key="index"
+			<input
+				v-for="(c, index) in getCtData"
+				:key="index"
 				type="text"
-        v-model="getCtData[index]" ref="input" 
+				v-model="getCtData[index]"
+				ref="input"
 				inputmode="numeric"
 				pattern="[0-9]*"
-        @input="e => {onInput(e.target.value, index)}" 
+				@input="(e) => onInput(e.target.value, index)"
-        @keydown="e => {onKeydown(e, index)}"
+				@keydown="(e) => onKeydown(e, index)"
-        @keypress="e => {onKeypress(e)}"
+				@keypress="(e) => onKeypress(e)"
 				@focus="onFocus"
+				@pause="onPause"
 				:disabled="loading"
-        >
+			/>
 		</div>
 	</div>
 </template>
 <script>
-import { defineComponent } from 'vue'
+	import { defineComponent } from "vue";
 
-export default defineComponent({
+	export default defineComponent({
-  props:['ct'],
+		props: ["ct"],
 		data() {
 			return {
 				loading: false,
-    }
+				timeout: null,
+			};
 		},
 		computed: {
-    getCtData(){
+			getCtData() {
-      return this.ct
+				return this.ct;
 			},
 			ctSize() {
 				return this.getCtData.length;
 			},
 			cIndex() {
-      let i = this.getCtData.findIndex(item => item === '');
+				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) {
+			lastCode(newVal, oldVal) {
 				if (newVal && newVal != oldVal) {
 					this.$refs.input[this.ctSize - 1].blur();
 					this.sendCaptcha();
 				}
-    }
+			},
 		},
 		mounted() {
 			this.resetCaret();
 		},
 		methods: {
 			onInput(val, index) {
-      console.log('input',val,index)
+				console.log("input", val, index);
+				clearTimeout(this.timeout);
+				this.timeout = setTimeout(() => {
+					console.log("input=>", val, index);
 					// val = val.replace(/[^0-9]/g, '');
-	    val = String(val).replace(/\D/g, '');
+					val = String(val).replace(/\D/g, "");
-		this.getCtData[index] = val
+					this.getCtData[index] = val;
 					if (index == this.ctSize - 1) {
 						this.getCtData[this.ctSize - 1] = val[0]; // 最后一个码，只允许输入一个字符。
-      } else if(val.length > 1) {
+					} else if (val.length > 1) {
 						let i = index;
-        for (i = index; i < this.ctSize && i - index < val.length; i++) {
+						for (
+							i = index;
+							i < this.ctSize && i - index < val.length;
+							i++
+						) {
 							this.getCtData[i] = val[i];
 						}
 						this.resetCaret();
-      }else if(!(val+'')){
+					} else if (!(val + "")) {
-        this.getCtData[index] = ''
+						this.getCtData[index] = "";
 					}
+				}, 10);
 			},
+			onPause() {},
 			// 重置光标位置。
 			resetCaret() {
-      this.$refs.input[this.ctSize-1].focus();
+				this.$refs.input[this.ctSize - 1].focus();
 			},
 			onFocus() {
 				// 监听 focus 事件，将光标重定位到“第一个空白符的位置”。
-      let index = this.getCtData.findIndex(item => item === '');
+				let index = this.getCtData.findIndex((item) => item === "");
 				index = (index + this.ctSize) % this.ctSize;
 				this.$refs.input[index].focus();
 			},
@@ -92,60 +106,72 @@ export default defineComponent({
 			},
 			onKeydown(e, index) {
 				// 处理删除键
-      if (e.key === 'Backspace' || e.key === 'Delete') {
+				if (e.key === "Backspace" || e.key === "Delete") {
 					const val = e.target.value;
-        if (val === '') {
+					if (val === "") {
 						// 删除上一个input里的值，并对其focus。
 						if (index > 0) {
-            this.getCtData[index - 1] = '';
+							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)) {
+				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('');
+				let password = this.getCtData.map((item) => item).join("");
-      this.$emit('sendCaptcha',password)
+				this.$emit("sendCaptcha", password);
 			},
 
 			reset() {
 				// 重置。一般是验证码错误时触发。
-      this.getCtData = this.getCtData.map(item => '');
+				this.getCtData = this.getCtData.map((item) => "");
 				this.resetCaret();
-    }
+			},
-  }
+		},
-})
+	});
 </script>
 
 <style scoped lang="less">
-.captcha {
+	.captcha {
 		display: flex;
 		justify-content: space-between;
-}
+	}
-input {
+	input {
 		width: 8.7rem;
 		height: 8.7rem;
-  border: 0.1rem solid #B4BED7;
+		border: 0.1rem solid #b4bed7;
 		border-radius: 2rem;
 		text-align: center;
 		font-size: 2.4rem;
 		line-height: 8.7rem;
 		outline: none;
-}
+	}
-input:last-of-type {
+	input:last-of-type {
 		margin-right: 0;
-}
+	}
-input:disabled {
+	input:disabled {
 		color: #000;
 		background-color: #fff;
-}
+	}
-.msg {
+	.msg {
 		text-align: center;
-}
+	}
-
 </style>