vue3.0 项目h5，pc端实现扫描二维码 qrcode-reader-vue3

qrcode-reader-vue3 插件简述

qrcode-reader-vue3插件，允许您在不离开浏览器的情况下检测和解码二维码。

• 🎥 访问设备摄像头并持续扫描传入帧。QrcodeStream
• 🚮 渲染到一个空白区域，您可以在其中拖放要解码的图像。QrcodeDropZone
• 📂 是一个经典的文件上传字段，会立即扫描您选择的所有文件。QrcodeCapture

安装指令

npm install vue-qrcode-reader

H5扫码效果图

项目示例

扫描二维码组件

新建项目组件 QrScanner.vue

<template>
  <div>
    <QrStream
      :style="scannerStyle"
      @decode="handleDecode"
      @init="handleInit"
      @error="handleError"
    >
      <template v-if="showCloseButton">
        <div class="qr-scanner-container">
          <button class="close-view" @click="closeScanner">X</button>
          <div class="qr-scanner">
            <div class="box">
              <div class="line"></div>
              <div class="angle"></div>
            </div>
          </div>
        </div>
      </template>
    </QrStream>
  </div>
</template>

<script setup>
import { ref, defineExpose } from 'vue'
import { QrStream } from 'vue3-qr-reader'

const emit = defineEmits(['decode','close'])

const scannerStyle = {
  position: 'fixed',
  top: 0,
  left: 0,
  width: '100vw',
  height: '100vh',
  zIndex: 9999,
}

const showCloseButton = ref(false)

const qrcodeData = ref(null)

const handleDecode = (data) => {
  console.log('Decoded data:', data)
  emit('decode', data)
  qrcodeData.value = data
  
}

const closeScanner = () => {
  emit('close')
}

const handleInit = async (promise) => {
  try {
    const { capabilities } = await promise
    console.log('Camera capabilities:', capabilities)
    showCloseButton.value = true
  } catch (error) {
    handleError(error)
    
  }
}

const handleError = (error) => {
  const errorMessages = {
    NotAllowedError: '您需要授予相机访问权限',
    NotFoundError: '这个设备上没有摄像头',
    NotSupportedError: '所需的安全上下文(HTTPS、本地主机)',
    NotReadableError: '相机被占用',
    OverconstrainedError: '安装摄像头不合适',
    StreamApiNotSupportedError: '此浏览器不支持流API',
    InsecureContextError: '仅允许在安全上下文中访问摄像机。使用HTTPS或本地主机，而不是HTTP。',
  }

  const message = errorMessages[error.name] || 'ERROR: 摄像头错误'
  message.error(message)
  console.error(message)
}

defineExpose({ qrcodeData })
</script>

<style scoped lang="scss">
.qr-scanner-container {
  position: relative;
  width: 100%;
  height: 100%;

  .close-view {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: 50%;
    background-color: #fff;
    color: #000;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    cursor: pointer;
    z-index: 1000000;
  }
}

.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: 100vh;
  position: relative;
  background-color: #1110;

  /* background-color: #111; */
}

.qr-scanner .box {
  width: 213px;
  height: 213px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border: 0.1rem solid rgba(0, 255, 51, 0.2);
  /* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */
}

.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);
  }
}
</style>

index.ts 文件

import QrScanner from './src/QrScanner.vue'
export {QrScanner}

使用组件

<template>
  <div>
    <QrScanner v-if="showQrCodeReader" @decode="onDecodeHandler" @close="qrReaderClose" />
  </div>
</template>

<script setup>

import { QrScanner } from '@/components/QrScanner'
const showQrCodeReader = ref(false)
const paymentData = reactive({
  orderId: '',
  authCode: ''
})
const onDecodeHandler = (data) => {
  paymentData.authCode = data
  showQrCodeReader.value = false
}
const qrReaderClose = () => {
  showQrCodeReader.value = false
}
</script>