当前位置：首页 > VUE

vue怎么实现扫码

2026-01-22 00:06:34VUE

实现扫码功能的步骤

在Vue中实现扫码功能通常需要借助第三方库或原生API。以下是几种常见的方法：

使用HTML5的getUserMedia API 这种方法适用于浏览器环境，通过调用摄像头实现扫码。

<template>
  <div>
    <video ref="video" width="300" height="200" autoplay></video>
    <canvas ref="canvas" width="300" height="200"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    this.startCamera();
  },
  methods: {
    async startCamera() {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
      this.$refs.video.srcObject = stream;
    }
  }
}
</script>

使用第三方库vue-qrcode-reader 这是一个专门为Vue设计的二维码扫描库。

安装依赖：

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>

使用zxing-js/library 这是一个功能强大的条形码/二维码扫描库。

安装依赖：

npm install @zxing/library

使用示例：

<template>
  <div>
    <video ref="video" width="300" height="200"></video>
  </div>
</template>

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

export default {
  data() {
    return {
      codeReader: new BrowserMultiFormatReader()
    }
  },
  mounted() {
    this.codeReader.decodeFromVideoDevice(null, this.$refs.video, (result, err) => {
      if (result) console.log(result.text)
      if (err) console.error(err)
    })
  },
  beforeDestroy() {
    this.codeReader.reset()
  }
}
</script>