当前位置：首页 > VUE

vue实现扫码

2026-02-18 15:13:37VUE

Vue 实现扫码功能的方法

在 Vue 项目中实现扫码功能，可以通过以下方式完成：

安装依赖

使用 vue-qrcode-reader 或 html5-qrcode 等库来实现扫码功能。以 vue-qrcode-reader 为例：

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(decodedString) {
      this.result = decodedString;
    },
  },
};
</script>

处理扫码错误

可以监听错误事件，处理摄像头权限或扫码失败的情况：

<template>
  <div>
    <qrcode-stream @decode="onDecode" @init="onInit"></qrcode-stream>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

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

export default {
  components: { QrcodeStream },
  data() {
    return {
      error: '',
    };
  },
  methods: {
    onDecode(decodedString) {
      console.log(decodedString);
    },
    async onInit(promise) {
      try {
        await promise;
      } catch (error) {
        this.error = error.message;
      }
    },
  },
};
</script>

使用 html5-qrcode 实现

如果更倾向于使用 html5-qrcode，可以按以下方式实现：

npm install html5-qrcode

在 Vue 组件中使用：

<template>
  <div>
    <div id="qr-reader"></div>
  </div>
</template>

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

export default {
  mounted() {
    const html5Qrcode = new Html5Qrcode('qr-reader');
    html5Qrcode.start(
      { facingMode: 'environment' },
      { fps: 10, qrbox: 250 },
      (decodedText) => {
        console.log(decodedText);
      },
      (errorMessage) => {
        console.error(errorMessage);
      }
    );
  },
};
</script>

自定义扫码界面

可以通过 CSS 自定义扫码界面的样式：

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

<style>
.scanner-container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.scanner {
  border: 2px solid #ccc;
  border-radius: 8px;
}
</style>

兼容性与注意事项

vue实现扫码