vue3 使用 qrcodejs2 以及qrcodejs2-fix

最新推荐文章于 2024-07-25 00:13:32 发布

干货茶

最新推荐文章于 2024-07-25 00:13:32 发布

阅读量2.2k

点赞数 1

文章标签： npm 前端 node.js vue

本文链接：https://blog.csdn.net/qq_37554314/article/details/131232356

版权

在尝试使用npm安装qrcodejs2时遇到TypeError，读取未定义的_android属性。作者尝试了重装修复版本qrcodejs2-fix，并在Vue.js的组件中引入和设置二维码生成。在onMounted钩子函数中调用nextTick初始化二维码，但仍然遇到问题。

摘要由CSDN通过智能技术生成

注意:

// npm install qrcodejs2   
安装后报错：TypeError:Cannot read properties of undefined(reading‘_android‘)

没找到解决办法，重装了下面的



// npm install qrcodejs2-fix

使用

<template>
  <div class="qrCode" :id="el"></div>
</template>

<script setup>

// import QRCode from 'qrcodejs2-fix'

import QRCode from 'qrcodejs2-fix'
import { computed, onMounted, nextTick } from 'vue'

const props = defineProps({
  el: {
    type: String,
    required: true
  },
  options: {
    type: Object,
    required: false
  }
})
const currentEl = computed(() => props.el)
console.log(currentEl.value, 'currentEl')
onMounted(() => {
  nextTick(() => {
    autQRCode()
  })
})
const autQRCode = () => {
  let {
    text = '二维码',
    width = 200,
    height = 200,
    colorDark = '#333333',
    colorLight = '#ffffff',
    correctLevel = QRCode.CorrectLevel.L
  } = props.options
  const qrcode = new QRCode(currentEl.value, {
    text,
    width,
    height,
    colorDark, //二维码颜色
    colorLight, //二维码背景色
    correctLevel //容错率，L/M/H})
  })
  console.log(qrcode, 'qrcode')
  return qrcode.value
}
</script>