vue有两种生成二维码的方式，qrcode、vue-qr（有icon）

1、qrcode

npm ``install` `--save qrcodejs2
//所需页面导入
import QRCode from 'qrcodejs2'

<div ref="qrCodeUrl"></div>
<script setup lang='ts'>
import {onMounted,ref} from 'vue
import QRCode from 'qrcodejs2'
const qrCodeUrl=ref<any>(null)
const creatQrCode=()=> {
        var qrcode = new QRCode(qrCodeUrl.value, {
            text: 'https://blog.csdn.net/weixin_42601136', // 需要转换为二维码的内容
            width: 100,
            height: 100,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
    },
}
onMounted() {
    creatQrCode();
}
</script>

2、vue-qr

可以增加icon

npm install vue-qr --save
import vueQr from 'vue-qr'

<template>
  <div>
    <div class="qrcode" ref="qrCodeUrl"></div>
    <vue-qr :logoSrc="imageUrl" text="https://blog.csdn.net/weixin_42601136" :size="200"></vue-qr>
  </div>
</template>

<script setup lang='ts'>
import QRCode from "qrcodejs2";
import vueQr from "vue-qr";
import {ref,onMounted}from "vue";
const qrCodeUrl=ref<any>(null)
const imageUrl=require("./sw.jpg")
const creatQrCode=()=>{
      var qrcode = new QRCode(qrCodeUrl.value, {
        text: "https://blog.csdn.net/weixin_42601136", // 需要转换为二维码的内容
        width: 100,
        height: 100,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
  }
 onMounted() {
    creatQrCode();
 }
</script>

<style scoped>
.qrcode {
  display: inline-block;
  width: 132px;
  height: 132px;
  background-color: #fff;
  padding: 6px;
  box-sizing: border-box;
}
</style>