Vue3 生成二维码(内容或跳转链接)

以下也是借鉴大佬的代码, 这里只是整理出来, 方便以后自己使用

大佬的帖子 : vue3中使用qrcodejs2-fix插件生成二维码_G_ing的博客-CSDN博客

其他人的帖子不是报错就是繁琐胡扯, 有人连canvas都结合起来用, 还封装成组件, 写的乱七八糟, 明明这么简单几句代码就实现的

所以看到这个帖子, 就别去搜索其他人的了, 保证管用

使用的依赖 qrcodejs2-fix

npm install qrcodejs2-fix

DOM处

页面中引入

import { onMounted, ref, reactive, nextTick } from 'vue';
// 页面中引入
import QRCode from 'qrcodejs2-fix';

onMounted(() => {
    // 生成二维码
    getQrCode();
});

// 生成方法
const getQrCode = () => {
    // DOM 都加载完毕再执行
    nextTick(() => {
        document.getElementById('qrCodeBox').innerHTML = '';
        new QRCode(document.getElementById('qrCodeBox'), {
            text: '呱呱', // 扫码后显示的内容, 如果页面链接, 扫码后会直接跳转到链接
            width: 100, //二维码宽
            height: 100, //二维码高
        });
    });
};

如果扫码内容是需要接口返回的, 建议这样写

import { onUnmounted, onMounted, ref, reactive, watchEffect } from 'vue';

// 进入页面只执行一次的监听函数
watchEffect(() => {
    // 当接口返回了数据, 再生成二维码
    if (接口返回的数据存在) getQrCode();
})

// 生成二维码
// 这里也不用包裹nexttick, 因为接口返参已经有延迟了
const getQrCode = () => {
    document.getElementById('qrCodeBox').innerHTML = '';
    new QRCode(document.getElementById('qrCodeBox'), {
        text: `${接口返回的数据} ${接口返回的数据}`,
        width: 100, //二维码宽
        height: 100, //二维码高
    });
};

使用原理说明

new QRCode(element, parameter); 
//element 第一个参数为二维码容器,即页面元素
//parameter 生成二维码图片的参数