1、推荐2个生成二维码的插件包

一、qrcodejs2

QRCode.js是用于制作QRCode的javascript库。QRCode.js支持跨浏览器，在DOM中使用HTML5 Canvas和表标签。 QRCode.js没有依赖关系。

下载

npm 下载
npm i qrcodejs2
yarn 下载
yarn add qrcodejs2

使用方式

<template>
  <div ref="box"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import QRCode from 'qrcodejs2'
let box = ref<HTMLDivElement>()
onMounted(() => {
   getCode()
})
 const getCode = () => {
   const qrcode = new QRCode(box.value, {
     text: '二维码展示的内容', // 用于生成二维码的文本
     width: 200, // 高度
     height: 200, // 宽度
     colorDark: '#000000', //前景色
     colorLight: '#ffffff', //后景色
     correctLevel: QRCode.CorrectLevel.H //容错级别 QRCode.CorrectLevel.L QRCode.CorrectLevel.M QRCode.CorrectLevel.Q QRCode.CorrectLevel.H
   })
 }
</script>

二、vue-qr

Vue 唯一的一个二维码组件

下载

npm 下载
npm install vue-qr
yarn 下载
yarn add vue-qr

使用

<vue-qr :bgSrc='src' :logoSrc="src2" text="Hello world!" :size="200"></vue-qr>
<vue-qr text="Hello world!" :callback="test" qid="testid"></vue-qr>
// vue2.0
import VueQr from 'vue-qr'

// vue3.0 (support vite)
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
...
{
  components: {VueQr}
}

属性