1.安装文件

npm install --save qrcode2

2.引入文件

import QRCode from 'qrcode2';

3.引入文件

<template>
    <div class="qrcodeimg">
       <div class="item" id="qrcode" ref="qrCode" xss=removed></div>
    </div>
</template>
crateQrcode(id) {
        this.imgVisible = true;
        this.$nextTick(() => {
          let qr = new QRCode(this.$refs.qrCode, {
            width: 300,
            height: 300, // 高度
            text: id // 二维码内容
            // render: 'canvas' // 设置渲染方式(有两种方式 table和canvas,默认是canvas)
            // background: '#f0f',
            // foreground: '#ff0'
          })
          console.log(qr)
        });
      },
    }

4.清空二维码

document.getElementById("qrcode").innerHTML = "";

5.特别提醒

注意:一定要在div生成之后再生成二维码,否则就会出现Cannot read property ‘appendChild’ of null"的错误
this.$nextTick

参考链接1:https://blog.csdn.net/abcdef12030/article/details/100667911
参考链接2:https://blog.csdn.net/xy19950125/article/details/89494369

Logo

前往低代码交流专区

更多推荐