安装插件

npm install qrcodejs2 --save
npm install qrcodejs2-fiX --save

实例代码

<template>
  <div class="container">
    <van-nav-bar
      fixed
      placeholder
      left-text="返回"
      title="二维码"
      left-arrow
      @click-left="onClickLeft"
    />
    <div id="title">
      请复制二维码或者链接
    </div>
    <div id="qqq" >
      <img id="trueQrCode" src=""/>
      <div id="qrCode" ref="qrCodeDiv"></div>
    </div>
    
    <div id="text">
      <a :href="state.url" target="_blank">{{state.url}}</a>
    </div>
  </div>
</template>
<script setup lang="ts">

import QRCode from 'qrcodejs2-fix';
import { ref } from "vue";

const router = useRouter();

const state = reactive({
  url: "",
});

const qrCodeDiv = ref<any>(null);

let timerImg = setInterval(() => {
  const trueQrCode = document.getElementById("trueQrCode")
  const divQrCode = document.getElementById("qrCode")
  if(!trueQrCode || !divQrCode) return;
  let src = "";
  if(src === "" && divQrCode.getElementsByTagName('img').length > 0){
    const element = divQrCode.getElementsByTagName('img')[0]
    src = element.src
  }
  if(src === "" && divQrCode.getElementsByTagName('canvas').length > 0){
    const element = divQrCode.getElementsByTagName('canvas')[0]
    src = element.toDataURL("image/png");  
  }
  if(src !== ""){
    clearInterval(timerImg)
    trueQrCode.setAttribute("src", src)
  }
},300);
onMounted(async () => {
  console.log("===home onMounted");
  nextTick(() => {
    console.log("===home onMounted nextTick");
    getQrCode();
  })
});

onUnmounted(async () => {
  console.log("===home onUnmounted");
  clearInterval(timerImg)
})

const getQrCode = async () => {
  const root = window.location.protocol+"//"+window.location.host
  //拼接字符串
  const url = root+'/#/signup?i='+'abcd'
  state.url = url
  new QRCode(qrCodeDiv.value, {
    text: url,
    width: 200,
    height: 200,
    colorDark: "#333333", //二维码颜色
    colorLight: "#ffffff", //二维码背景色
    correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
  })
  
};

const onClickLeft = () => {
  router.go(-1);
};
</script>
<style lang="scss" scoped>
.container {
  padding: 24px 40px 24px 40px;
  .my_input {
    margin-bottom: 36px;
    :deep(.van-field__label) {
      color: #e7fcff;
      text-align: left;
    }
  }
  .my_text {
    margin-bottom: 72px;
    :deep(.van-field__label) {
      color: #e7fcff;
      text-align: left;
    }
  }
  .van-button {
    width: 100%;
  }
}
#qqq {
  background-color: #111;
  width:200px;
  height:200px;
  margin: 0 auto; /*水平居中*/

  #trueQrCode{
    width: 200px;
    height: 200px;
    padding: 0px; // 利用padding的特性，挤出白边
  }
}
 
#qrCode {
  display: none;
}

#title{
  text-align: center;
  padding-bottom: 10px;
}
#text{
  text-align: center;
  padding-top: 10px;
  a {
    color: white;
  }
}
</style>

1.vue中使用qrcodejs2生成二维码失败Cannot read properties of undefined (reading '_android')

第一步：安装插件npm install qrcodejs2-fiX --save
第二步：在引入插件使用：import QRCode from 'qrcodejs2-fix';

2.vue中使用qrcodejs2生成的二维码图片在手机浏览器上不能长按保存图片

qrcodejs2在生成图片时会根据浏览器是否支持CanvasRenderingContext2D判断使用img或者canvas生成二位阿门。如果采用了canvas，则长按不能保存图片，解决思路：增加一个img，隐藏qrcodejs2的容器div。判断div中的img是否有src，有就赋值给img，没有的话就将canvas的数据赋值给img;

let timerImg = setInterval(() => {
  const trueQrCode = document.getElementById("trueQrCode")
  const divQrCode = document.getElementById("qrCode")
  if(!trueQrCode || !divQrCode) return;
  let src = "";
  if(src === "" && divQrCode.getElementsByTagName('img').length > 0){
    const element = divQrCode.getElementsByTagName('img')[0]
    src = element.src
  }
  if(src === "" && divQrCode.getElementsByTagName('canvas').length > 0){
    const element = divQrCode.getElementsByTagName('canvas')[0]
    src = element.toDataURL("image/png");  
  }
  if(src !== ""){
    clearInterval(timerImg)
    trueQrCode.setAttribute("src", src)
  }
},300);