当前位置：首页 > VUE

vue实现扫码

2026-01-14 05:21:46VUE

Vue 实现扫码功能的方法

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

使用 `vue-qrcode-reader` 库

vue-qrcode-reader 是一个专为 Vue 设计的扫码库，支持二维码和条形码识别。

安装依赖：

npm install vue-qrcode-reader

示例代码：

vue实现扫码

<template>
  <div>
    <qrcode-stream @decode="onDecode"></qrcode-stream>
    <p>扫描结果: {{ result }}</p>
  </div>
</template>

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

export default {
  components: { QrcodeStream },
  data() {
    return {
      result: ''
    }
  },
  methods: {
    onDecode(result) {
      this.result = result
    }
  }
}
</script>

使用 `html5-qrcode` 库

html5-qrcode 是一个纯 JavaScript 的扫码库，可以在 Vue 中使用。

安装依赖：

npm install html5-qrcode

示例代码：

vue实现扫码

<template>
  <div>
    <div id="qr-reader" style="width: 300px"></div>
    <p>扫描结果: {{ result }}</p>
  </div>
</template>

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

export default {
  data() {
    return {
      result: '',
      html5QrCode: null
    }
  },
  mounted() {
    this.html5QrCode = new Html5Qrcode("qr-reader")
    this.html5QrCode.start(
      { facingMode: "environment" },
      { fps: 10 },
      (decodedText) => {
        this.result = decodedText
      },
      (errorMessage) => {
        console.log(errorMessage)
      }
    )
  },
  beforeDestroy() {
    this.html5QrCode.stop()
  }
}
</script>

使用手机原生 API

对于移动端应用，可以通过调用设备的摄像头 API 实现扫码功能。这种方法通常需要 Cordova 或 Capacitor 等混合应用框架支持。

示例（使用 Cordova 插件）：

cordova plugin add phonegap-plugin-barcodescanner

Vue 代码：

<template>
  <button @click="scan">扫码</button>
  <p>扫描结果: {{ result }}</p>
</template>

<script>
export default {
  data() {
    return {
      result: ''
    }
  },
  methods: {
    scan() {
      cordova.plugins.barcodeScanner.scan(
        (result) => {
          if (!result.cancelled) {
            this.result = result.text
          }
        },
        (error) => {
          console.log("扫描错误: " + error)
        }
      )
    }
  }
}
</script>