当前位置：首页 > VUE

使用vue实现扫码

2026-02-24 12:51:18VUE

使用Vue实现扫码功能

扫码功能可以通过集成第三方库或原生API实现。以下是几种常见的方法：

使用vue-qrcode-reader库

vue-qrcode-reader是一个专为Vue设计的二维码扫描库，基于浏览器原生API。

安装依赖：

npm install vue-qrcode-reader

基本用法：

<template>
  <qrcode-stream @decode="onDecode"></qrcode-stream>
</template>

<script>
import { QrcodeStream } from 'vue-qrcode-reader'

export default {
  components: { QrcodeStream },
  methods: {
    onDecode(decodedString) {
      console.log(decodedString)
      // 处理扫描结果
    }
  }
}
</script>

使用Html5-QRCode库

Html5-QRCode是一个纯JavaScript的扫码库，不依赖Vue但可以很好集成。

安装：

npm install html5-qrcode

Vue组件实现：

<template>
  <div>
    <div id="qr-reader" style="width: 300px"></div>
  </div>
</template>

<script>
import { Html5Qrcode } from 'html5-qrcode'

export default {
  mounted() {
    const html5QrCode = new Html5Qrcode("qr-reader")
    const config = { fps: 10, qrbox: 250 }

    html5QrCode.start(
      { facingMode: "environment" },
      config,
      (decodedText) => {
        console.log(decodedText)
        // 处理结果
      },
      (errorMessage) => {
        console.warn(errorMessage)
      }
    ).catch(err => {
      console.error(err)
    })
  }
}
</script>

使用ZXing库

ZXing是一个功能强大的条形码/二维码处理库。

安装：

npm install @zxing/library

实现示例：

<template>
  <div>
    <video ref="video" width="300" height="200"></video>
    <button @click="startScan">开始扫描</button>
  </div>
</template>

<script>
import { BrowserMultiFormatReader } from '@zxing/library'

export default {
  data() {
    return {
      codeReader: new BrowserMultiFormatReader()
    }
  },
  methods: {
    async startScan() {
      try {
        const result = await this.codeReader.decodeFromVideoDevice(
          null,
          this.$refs.video,
          (result, err) => {
            if (result) {
              console.log(result.text)
              // 处理结果
            }
            if (err && !(err instanceof ZXing.NotFoundException)) {
              console.error(err)
            }
          }
        )
      } catch (e) {
        console.error(e)
      }
    }
  },
  beforeDestroy() {
    this.codeReader.reset()
  }
}
</script>