当前位置：首页 > VUE

vue实现扫码插件

2026-01-21 10:04:34VUE

Vue 实现扫码功能的插件与方法

使用 vue-qrcode-reader 插件

安装插件：

npm install vue-qrcode-reader

在组件中引入：

import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader'

组件模板示例：

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

<script>
export default {
  methods: {
    onDecode(decodedString) {
      console.log(decodedString)
    }
  }
}
</script>

使用 html5-qrcode 库

安装依赖：

npm install html5-qrcode

组件实现：

<template>
  <div>
    <div id="qr-reader" style="width: 500px"></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.log(errorMessage)
      }
    )
  }
}
</script>

使用 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) => {
            console.log(result.text)
          }
        )
      } catch (err) {
        console.error(err)
      }
    }
  }
}
</script>

移动端适配方案

对于移动端设备，可以添加以下优化：

// 检查是否移动设备
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)

// 调整摄像头参数
const constraints = {
  video: {
    width: isMobile ? { ideal: 1280 } : { min: 1024, ideal: 1280, max: 1920 },
    height: isMobile ? { ideal: 720 } : { min: 576, ideal: 720, max: 1080 },
    facingMode: 'environment'
  }
}

错误处理与优化

添加错误处理和用户引导：

vue实现扫码插件

methods: {
  onError(error) {
    if (error.name === 'NotAllowedError') {
      alert('请允许摄像头访问权限')
    } else if (error.name === 'NotFoundError') {
      alert('未检测到可用摄像头')
    } else {
      console.error(error)
    }
  },

  showUserGuide() {
    // 显示扫描区域引导提示
  }
}

这些方法提供了在Vue项目中实现扫码功能的不同方案，可以根据项目需求选择适合的插件或库。