当前位置：首页 > VUE

vue实现扫描二维码

2026-03-26 17:38:14VUE

Vue 实现扫描二维码功能

安装二维码扫描库

推荐使用 vue-qrcode-reader 库，它基于 jsQR 和 Instascan，支持在 Vue 项目中快速集成二维码扫描功能。安装命令如下：

npm install vue-qrcode-reader

基础实现代码

在 Vue 组件中引入 QrcodeStream 或 QrcodeCapture 组件，分别用于实时扫描和静态图片解析。

<template>
  <div>
    <!-- 实时扫描 -->
    <qrcode-stream @decode="onDecode" :paused="paused"></qrcode-stream>
    <p>扫描结果: {{ decodedContent }}</p>

    <!-- 图片解析 -->
    <qrcode-capture @decode="onDecode"></qrcode-capture>
    <input type="file" @change="onFileUpload">
  </div>
</template>

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

export default {
  components: { QrcodeStream, QrcodeCapture },
  data() {
    return {
      decodedContent: '',
      paused: false
    };
  },
  methods: {
    onDecode(content) {
      this.decodedContent = content;
      this.paused = true; // 扫描成功后暂停
    },
    onFileUpload(event) {
      const file = event.target.files[0];
      if (file) {
        const img = new Image();
        img.src = URL.createObjectURL(file);
        // 图片解析逻辑由 QrcodeCapture 自动处理
      }
    }
  }
};
</script>

自定义扫描界面

通过 CSS 和插槽自定义扫描框样式：

<qrcode-stream @decode="onDecode">
  <div class="scan-overlay">对准二维码</div>
</qrcode-stream>

<style>
.scan-overlay {
  position: absolute;
  width: 80%;
  height: 200px;
  border: 2px dashed #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

错误处理

监听 error 事件处理摄像头权限或兼容性问题：

<qrcode-stream @error="onError"></qrcode-stream>

methods: {
  onError(error) {
    console.error('摄像头错误:', error.name);
    if (error.name === 'NotAllowedError') {
      alert('请授予摄像头权限');
    }
  }
}

移动端适配

在移动端需注意：

添加 user-select: none 防止长按误触

通过 @init 事件检查后置摄像头支持：


<qrcode-stream @init="onInit"></qrcode-stream>

methods: { onInit(promise) { promise.then(() => { console.log('摄像头初始化成功'); }).catch(error => { alert('移动端需启用摄像头权限'); }); } }

vue实现扫描二维码


#### 替代方案

如果遇到兼容性问题，可改用纯 JavaScript 库如 `jsQR`：
```javascript
import jsQR from 'jsqr';

function scanWithJsQR(imageData) {
  const code = jsQR(imageData.data, imageData.width, imageData.height);
  if (code) {
    console.log('解码结果:', code.data);
  }
}

以上方法覆盖了从基础实现到高级定制的完整流程，可根据实际需求选择适合的方案。