原生Vue实现二维码扫一扫，兼容PC、安卓、IOS

最新推荐文章于 2025-04-03 15:11:41 发布

FuSh1

最新推荐文章于 2025-04-03 15:11:41 发布

阅读量6.5k

点赞数 2

文章标签： vue.js ios javascript

本文链接：https://blog.youkuaiyun.com/weixin_36766709/article/details/121233395

版权

本文详细介绍了如何在Vue项目中使用vue-qrcode-reader组件实现二维码扫描功能。首先需要通过yarn添加依赖，然后在main.js全局引入并注册。在组件中，设置错误处理和解码回调函数，展示扫描结果。注意，该功能仅支持Https或Localhost环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生Vue实现二维码扫一扫

通过使用 vue-qrcode-reader 进行实现，必须是 Https 或 Localhost

vue-qrcode-reader

yarn add vue-qrcode-reader --save

使用步骤

1.引入库(全局引入)

代码如下（示例）main.js：

import VueQrcodeReader from "vue-qrcode-reader";
Vue.use(VueQrcodeReader);

2.使用

代码如下（示例）：

<p class="error">{{ error }}</p>
<p class="decode-result">
 Last result: <b>{{ result }}</b>
</p>
<qrcode-stream @decode="onDecode" @init="onInit" />
{{ result }}

    async onInit(promise) {
      try {
        await promise
      } catch (error) {
        if (error.name === 'NotAllowedError') {
          this.error = 'ERROR: you need to grant camera access permission'
        } else if (error.name === 'NotFoundError') {
          this.error = 'ERROR: no camera on this device'
        } else if (error.name === 'NotSupportedError') {
          this.error = 'ERROR: secure context required (HTTPS, localhost)'
        } else if (error.name === 'NotReadableError') {
          this.error = 'ERROR: is the camera already in use?'
        } else if (error.name === 'OverconstrainedError') {
          this.error = 'ERROR: installed cameras are not suitable'
        } else if (error.name === 'StreamApiNotSupportedError') {
          this.error = 'ERROR: Stream API is not supported in this browser'
        } else if (error.name === 'InsecureContextError') {
          this.error =
            'ERROR: Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.'
        } else {
          this.error = `ERROR: Camera error (${error.name})`
        }
      }
    },
    onDecode(result) {
      this.result = result
    },