在vue中使用qrcodejs2生成二维码

效果:

// 一: 下载依赖包
npm i qrcodejs2 --save

// 二: 在使用的页面引入
import QRCode from "qrcodejs2";

// 三: 创建展示区域的div,我是写在el-dialog中,必须用slot="footer" 包裹,不然获取不到dom元素
<div class="H5code" slot="footer">
   <div id="qrcode" class="qrcode" ref="qrcode"></div>
</div>

//四: js代码
 crateQrcode() {
        this.$refs.qrcode.innerHTML = "";
        this.qr = new QRCode("qrcode", {
          width: 240,
          height: 240, // 高度
          text: 'https://blog.csdn.net/weixin_49431999/article/details/117769423' // 二维码内容
          // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
          // background: '#f0f'
          // foreground: '#ff0'
        });
    },