Vue 前端扫描器 判断手动输入还是扫码枪输入

代码功能概述

1. 输入事件处理：在 SKU 输入框输入字符时，handleInput 方法会被触发。

2. 时间间隔判断：在输入字符达到5个时，计算两次输入的时间间隔，以此判断是手动输入还是扫码枪输入。

3. 操作分支：

   • 手动输入：当时间间隔超过设定的阈值，认为是手动输入。
   • 扫码枪输入：当时间间隔在设定阈值以内，认为是扫码枪输入。

4. 触发方法：

   • getAll：处理 SKU 的逻辑。
   • barcodeScanner：在扫码枪输入时，打开子组件弹窗，并显示订单信息。

代码详细解释

Template 部分

<template>
  <div>
    <!-- SKU 输入框 -->
    <input v-model="formInline.sku" @input="handleInput" />
  </div>
</template>

• v-model="formInline.sku"：双向绑定输入框的值到 formInline.sku。
• @input="handleInput"：每次输入框内容发生变化时调用 handleInput 方法。

Script 部分

<script lang="ts" setup>
import { ref } from 'vue';

// 定义响应式变量
const previousInputTime = ref<number | null>(null);  // 存储上次输入的时间戳
const inputThreshold = ref<number>(20);               // 设置阈值，单位为毫秒
const formInline = ref<{ sku: string }>({ sku: '' }); // SKU 输入框的状态
const orderId = ref<string>('');                      // 订单 ID
const total = ref<number>(0);                         // 总数

• previousInputTime：存储上次输入的时间，以计算时间间隔。
• inputThreshold：定义了时间间隔的阈值，用于区分扫码枪和手动输入。
• formInline：包含 SKU 的响应式状态。
• orderId 和 total：假设是与当前操作相关的状态。

/**
 * handleInput 方法用于处理 SKU 输入框的输入事件
 */
const handleInput = () => {
  const currentInputTime = new Date().getTime();

  if (formInline.value.sku.length === 5 && previousInputTime.value) {
    const interval = currentInputTime - previousInputTime.value;

    if (interval > inputThreshold.value) {
      console.log("手动输入");
    } else if (interval < inputThreshold.value) {
      console.log("扫码枪输入");
      getAll(formInline.value.sku); // 调用获取 SKU 的方法
      setTimeout(() => {
        barcodeScanner();
      }, 100);
    } else {
      console.log("不执行任何操作");
    }
  }
  previousInputTime.value = currentInputTime; // 更新上次输入时间
};

• handleInput：处理输入事件。

  • currentInputTime：获取当前时间的时间戳。

  • 如果 SKU 的长度为 5 且 previousInputTime 已定义：

    • 计算时间间隔 interval。
    • 判断时间间隔是否超过阈值来区分手动输入和扫码枪输入。
    • 如果是扫码枪输入，调用 getAll 方法获取 SKU，并使用 setTimeout 延迟调用 barcodeScanner 方法。

  • 更新 previousInputTime 为当前时间。

// input 扫码枪事件
const barcodeScanner = () => {
  console.log(orderId.value);
  if (formInline.value.sku !== "" && total.value !== 0) {
    setTimeout(() => {
      // 打开子组件弹窗
      (this.$refs.pendDetails as any).show(orderId.value);
    }, 100);
  }
};

• barcodeScanner：处理扫码枪事件。

  • 如果 SKU 不为空且 total 不为 0，延迟 100 毫秒后打开子组件弹窗，并显示 orderId。

// 假设 getAll 是一个方法
const getAll = (sku: string) => {
  // 处理 SKU 的逻辑
  console.log(`获取 SKU: ${sku}`);
};

• getAll：处理 SKU 的逻辑，这里只是打印了 SKU。

总结

通过比较输入时间间隔来区分手动输入和扫码枪输入，结合了时间戳计算和条件判断，适用于需要区分不同输入方式的场景。通过响应式数据和方法调用，能够动态处理 SKU 输入和触发相关操作。