vue3 中生成二维码（可添加logo）

业务需求

根据项目中提供的URL地址生成二维码

解决方案

使用 vue-qr来生成二维码

1. 安装vue-qr

pnpm i vue-qr

2. 使用方式

<template>
    <div class="qrcode-wrapper">
      <VueQr
         v-if="activeTabName === 'mobile'"
         :text="qrcodeVal"
         :size="200"
         :logoSrc="logoImg"
         :colorDark="qrcodeColor.colorDark"
         :colorLight="qrcodeColor.colorLight" />
    </div>
</template>

<script setup>
    import { ref } from 'vue'
    import VueQr from 'vue-qr/src/packages/vue-qr.vue' // 引入组件
    import logoImg from '@/images/logo.png' // logo
    const activeTabName = ref('pc')
    const qrcodeVal = ref('https://www.baidu.com')
    const qrcodeColor = ref({
        colorDark:'#000',
        colorLight:'#fff'
    })
</script>

3.组件属性(常用)

属性	type	含义
text	string	生成二维码的数据，如URL
size	number	二维码大小
logoSrc	string	logo图片地址
colorDark	string	二维码实点颜色
colorLight	string	二维码空白区颜色

4.结果展示

5.更多属性可参考：

npm地址：https://www.npmjs.com/package/vue-qr

github地址：https://github.com/Binaryify/vue-qr