Vue3 qrcode生成二维码

前言

  二维码的实际应用场景有很多，比如：当用户需要分享某个页面或者内容时，可以通过生成二维码的方式来方便地分享给其他人；在网页中，二维码也可以用于扫描登录、扫码领取优惠券等功能。
  本文主要讲述在 Vue3 中，如何使用Qrcode生成二维码。

安装

npm i -D qrcode

效果图

方法

详细配置，请查看qrcode官方网站：https://www.npmjs.com/package/qrcode#

（1）toDataURL(url, [options], [cb(error, url)])，只支持img/png类型

// 封装成组件QRCodeImg.vue
<template>
    <div class="qrcode">
        <img :src="QRUrl"/>
    </div>
</template>

<script setup lang="ts">
import QRCode from 'qrcode'

const props = defineProps({
     
    // 传入链接地址
    qrLink: {
     
        default: '',
        require: true
    },
    // 传入配置项
    options: {
     
        default: {
     }
    }
})

const QRUrl = ref('')

// 默认配置项