实现使用扫码枪获取扫码内容，定时刷新获取

获取扫码枪扫码内容 页面代码

页面效果

页面代码

<!-- 扫描条码/二维码页面 -->
<template>
  <div id="KeepScan">
    <div class="prompt">
      <div>{{ title }}</div>
      <div>放置在条码扫描口进行扫描</div>
    </div>
    <div v-if="clientWidth > 1080" class="img-wrapper">
      <img src="@/assets/images/bar-code1.png" alt="">
      <img class="line" src="@/assets/images/bar-code-line1.png" alt="">
    </div>
    <div v-else class="img-wrapper">
      <img src="@/assets/images/bar-code2.png" alt="">
      <img class="line" src="@/assets/images/bar-code-line2.png" alt="">
    </div>
    <!-- 获取扫码焦点 -->
    <input
      id="scanQRcodeGetContent_input"
      v-model="scanContent"
      type="password"
      autocomplete="off"
    >
    <el-button type="primary" @click="handleCancel()">{{ type === '03' ? '放弃取件':'放弃存件' }}</el-button>
  </div>
</template>
<script>
import defaultImg from '../../../../assets/images/cancel-storage.png'
export default {
  name: 'KeepScan',
  data() {
    return {
      clientWidth: 0, // 客户端宽度
      type: '', // 操作类型 01行驶证 02驾驶证 03取件码
      title: '', // 页面title
      scanContent: '' // 扫码信息
    }
  },
  watch: {
    $route: {
      handler(val) {
        this.type = val.params?.type
        this.title = this.switchTitle(val.params?.type)
      },
      immediate: true,
      deep: true
    },
    scanContent: {
      handler(val) {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          if (val !== '') {
            document.getElementById('scanQRcodeGetContent_input').blur
            this.handleJump()
          } else {
            document.getElementById('scanQRcodeGetContent_input') &&
              document.getElementById('scanQRcodeGetContent_input').focus()
          }
          console.log('扫码内容:', val)
        }, 1000)
      }
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.clientWidth = document.documentElement.clientWidth
      console.log('resize', this.clientWidth)
    })
    this.inputFocusHandler()
    document.getElementById('scanQRcodeGetContent_input') &&
      document.getElementById('scanQRcodeGetContent_input').focus()
  },
  methods: {
    // 点击页面任意位置
    inputFocusHandler() {
      document
        .getElementById('app')
        .addEventListener('click', this.clickEventHandler)
    },
    // 点击页面任意位置的点击事件处理函数
    clickEventHandler() {
      // 当前页面无论点哪里，都让扫描二维码后获得的信息展示的 input 框获取焦点
      document.getElementById('scanQRcodeGetContent_input') &&
        document.getElementById('scanQRcodeGetContent_input').focus()
    },
    // 切换标题内容
    switchTitle(type) {
      switch (type) {
        case '03':
          return '请将取件二维码'
        default:
          return '请将证件条形码'
      }
    },
    // 放弃存件
    handleCancel() {
      this.$confirm(
        `<img src=${defaultImg} style="width: 300px;height: 300px;"/>`,
        '请确认是否放弃存件？',
        {
          confirmButtonText: '继续存件',
          cancelButtonText: '确定放弃',
          dangerouslyUseHTMLString: true,
          closeOnClickModal: false,
          showClose: false,
          center: true
        }
      )
        .then(() => {
          // ----- 测试操作 -----
          // this.handleJump()
        })
        .catch(() => {
          this.$router.push('/cabinet/keep')
        })
    },
    // 获取扫码信息下一步
    handleJump() {
      const params = {}
      if (this.type === '03') {
        params.qjm = this.scanContent
      } else {
        params.ywzl = this.type
        params.zxbh = this.scanContent
      }
      this.$router.push({
        name: 'KeepSearch',
        params
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#KeepScan {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

  .img-wrapper {
    width: 100%;
    height: 400px;

    img {
      position: absolute;
      width: 400px;
      margin-left: calc(50% - 200px);
    }

    .line {
      top: 58%;
    }
  }
  #scanQRcodeGetContent_input {
    position: absolute;
    z-index:-10;
  }
}
@media screen and (max-width: 1080px) {
  #KeepScan {
    .img-wrapper {
      height: 550px;
      margin: 110px 0 120px;
      img {
        width: 500px;
        margin-left: calc(50% - 250px);
      }
      .line {
        top: 65%;
      }
    }
  }
}
</style>