vue实现二维码扫码功能

最新推荐文章于 2025-11-10 16:04:39 发布

原创

最新推荐文章于 2025-11-10 16:04:39 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了如何在Vue项目中实现二维码扫码功能。首先强调该功能仅在HTTPS协议下可用，且建议使用Vue2。通过引入vue-qrcode-reader插件并创建组件的方式，详细阐述了安装、组件创建和使用的步骤，帮助开发者在多个页面集成二维码扫描功能。

提示

这个插件只能在https协议下才能访问，http协议不好使，最好用vue2,vue3容易报错！！！！！

描述

通过vue的方式，实现扫码功能

参考文档：vue-qrcode-reader去官网–>官方文档

效果展示

在这里插入图片描述

实现步骤：

步骤一（安装插件）

npm install --save vue-qrcode-reader

步骤二（创建组件）

因为可能多个页面都会用到，所以弄成了组件
（1）在src下面的components创建qrcode.vue
（2）代码实现

// qrcode.vue
<template>
  <div>
      <!-- <p class="error">{
  
  { error }}</p> -->
      <!--错误信息-->

      <!-- <p class="decode-result">
          扫描结果:
          <b>{
  
  { result }}</b>
      </p> -->
      <!--扫描结果-->
      <!-- <p @click="openCamera">打开相机</p>
      <div v-show="show" class="cameraMessage">
          <p @click="closeCamera">关闭相机</p>
          <p @click="openFlash">打开手电筒</p>
          <p @click="switchCamera">相机反转</p>
      </div> -->

      <qrcode-stream
          v-show="qrcode"
          :camera="camera"
          :torch="torchActive"
          @decode="onDecode"
          @init="onInit"
      >
          <div>
              <div class="qr-scanner">
                  <div class="box">