直接上代码

<template>

  <div>

    <Input

      type="text"

      size="small"

      v-model="inputValue"

      ref="slotCardInput"

      @keyup.native="handleKeyUp"

      @keyup.enter.native="executeFunc()"

    >

    </Input>

  </div>

</template>

<script>

export default {

  name: "TestQrCodeVue",

  data() {

    return {

      // 输入框内容

      inputValue: "",

      // 键盘时间触发时间

      keyupLastTime: undefined,

      // 扫码触发值

      realCode: "",

    };

  },

  methods: {

    /**

     * 键盘事件处理

     *

     * @param {object} e 键盘触发对象

     * @returns

     * @author kangdongliang

     */

    handleKeyUp(e) {

      console.log("KK------打印当前触发键盘事件的对象", e);

      // 重置间隔时间

      let step = 0;

      if (this.keyupLastTime) {

        // NOTE:后续应该有更好的解决方法

        step = new Date().getTime() - this.keyupLastTime;

        console.log("KK------打印键盘事件触发step", step);

        // 根据间隔判断是否为扫码还是手动输入

        if (step > 50) {

          this.realCode = "";

        }

      }

      // 获取键盘事件触发时间

      this.keyupLastTime = new Date().getTime();

      // 输入法触发key为Process跳过-[判断是否为中文输入]

      if ((e.key != "Process" && step < 50) || e.code.trim() == "Enter") {

        if (e.key.trim().length == 1) {

          // 输入单个字母或者数字

          this.realCode += e.key;

          console.log("this.输入单个字母或者数字", this.realCode);

        } else if (e.code.trim() == "Enter") {

          // 根据规则,判断barcode类型,返回数据(自定义规则)

          if (!this.realCode) {

            return;

          }

          // NOTE:我的码有规则 所以这里就是校验 你没有就不用

          // 校验->赋值

          this.inputValue = this.realCode;

          // 清空临时变量

          this.realCode = "";

          if (e.key == "Process") {

            this.executeFunc();

          }

        }

      }

      this.keyupLastTime = undefined;

      // 清空临时变量

      this.realCode = "";

    },

    /**

     * 扫码事件处理

     *

     * @returns

     * @author kangdongliang

     */

    executeFunc() {

      console.log("this.inputValue", this.inputValue);

      this.keyupLastTime = undefined;

    },

  },

};

</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值