vue的h5页面使用vue-qrcode-reader扫描二维码

官网 https://gruhn.github.io/vue-qrcode-reader/demos/Validate.html
下载依赖包及引入

npm install vue-qrcode-reader

import { QrcodeStream } from 'vue-qrcode-reader'

components: {
        QrcodeStream
    },

dom结构

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

事件

onDecode(result) {
     // alert(result)
     if (result) {
         // 关闭相机
         this.camera = 'off'
         this.show = false
         this.qrcode = false
     }
     this.result = result
 },
 async onInit(promise) {
     // const { capabilities } = await promise
     // const TORCH_IS_SUPPORTED = !!capabilities.torch
     try {
         await promise
     } catch (error) {
         if (error.name === 'NotAllowedError') {
             this.error = 'ERROR: 您需要授予相机访问权限'
         } else if (error.name === 'NotFoundError') {
             this.error = 'ERROR: 这个设备上没有摄像头'
         } else if (error.name === 'NotSupportedError') {
             this.error = 'ERROR: 所需的安全上下文(HTTPS、本地主机)'
         } else if (error.name === 'NotReadableError') {
             this.error = 'ERROR: 相机被占用'
         } else if (error.name === 'OverconstrainedError') {
             this.error = 'ERROR: 安装摄像头不合适'
         } else if (error.name === 'StreamApiNotSupportedError') {
             this.error = 'ERROR: 此浏览器不支持流API'
         }
     }
 },

样式

.qr-scanner {
  background-image: linear-gradient(
          0deg,
          transparent 24%,
          rgba(32, 255, 77, 0.1) 25%,
          rgba(32, 255, 77, 0.1) 26%,
          transparent 27%,
          transparent 74%,
          rgba(32, 255, 77, 0.1) 75%,
          rgba(32, 255, 77, 0.1) 76%,
          transparent 77%,
          transparent
      ),
      linear-gradient(
          90deg,
          transparent 24%,
          rgba(32, 255, 77, 0.1) 25%,
          rgba(32, 255, 77, 0.1) 26%,
          transparent 27%,
          transparent 74%,
          rgba(32, 255, 77, 0.1) 75%,
          rgba(32, 255, 77, 0.1) 76%,
          transparent 77%,
          transparent
      );
  background-size: 3rem 3rem;
  background-position: -1rem -1rem;
  width: 100%;
  /* height: 100%; */
  height: 288px;
  /* height: 288px; */
  position: relative;
  background-color: #1110;
  /* background-color: #111; */
}
// 二维码框
.qr-scanner .box {
  width: 213px;
  height: 213px;
  position: absolute;
  left: 50%;
  top: 80%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border: 0.1rem solid rgba(0, 255, 51, 0.2);
}
.qr-scanner .myQrcode {
  text-align: center;
  color: #00ae10;
}
.qr-scanner .line {
  height: calc(100% - 2px);
  width: 100%;
  background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
  border-bottom: 3px solid #00ff33;
  transform: translateY(-100%);
  animation: radar-beam 2s infinite alternate;
  animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
  animation-delay: 1.4s;
}
.qr-scanner .box:after,
.qr-scanner .box:before,
.qr-scanner .angle:after,
.qr-scanner .angle:before {
  content: '';
  display: block;
  position: absolute;
  width: 3vw;
  height: 3vw;
  border: 0.2rem solid transparent;
}
.qr-scanner .box:after,
.qr-scanner .box:before {
  top: 0;
  border-top-color: #00ff33;
}
.qr-scanner .angle:after,
.qr-scanner .angle:before {
  bottom: 0;
  border-bottom-color: #00ff33;
}
.qr-scanner .box:before,
.qr-scanner .angle:before {
  left: 0;
  border-left-color: #00ff33;
}
.qr-scanner .box:after,
.qr-scanner .angle:after {
  right: 0;
  border-right-color: #00ff33;
}
@keyframes radar-beam {
  0% {
      transform: translateY(-100%);
  }
  100% {
      transform: translateY(0);
  }
}

vue.config.js配置访问为https，因为二维码扫描涉及隐私问题，所以要以https访问

devServer: {
        open: true,
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        proxy: {
            // 请求接口
            '/api': {
                target: RestUrl, // 代理的目标
                changeOrigin: true // 是否将主机头的原点更改为目标地址
            },
        },
        https: true
    },