Vue+Element-Ui项目中使用qrcodejs2将链接生成二维码

1. 下载安装包

npm i qrcodejs2 -S

2. 在要生成二维码的页面或组件内导入qrcodejs2

import QRCode from “qrcodejs2”;

3. 项目中使用

• 在html创建一个放置二维码的div

  <div ref="qrCodeUrl"></div>
  

• 调用方法生成二维码

  //将链接变成二维码图片
        creatQrCode() {
                var qrcode = new QRCode(this.$refs.qrCodeUrl, {
                text: this.text, // 需要转换为二维码的内容
                width: 150,
                height: 150,
                // render: "canvas", // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
                colorDark: "#000000", //二维码颜色
                colorLight: "#ffffff", //二维码背景色
                correctLevel: QRCode.CorrectLevel.H, //容错率，L/M/H
            });
        }
        

• 清除已生成的二维码（此代码根据项目情况调用）

this.$refs.qrCodeUrl.innerHTML = "";

注：如果在el-dialog中使用，由于dialog组件节点可能未生成的关系，建议将显示字段和生成二维码的方法放在一个方法里面，如下

       //展示弹窗及二维码
        payQR() {
            //显示弹窗
            this.dialogVisible = true;
            //生成二维码字段的链接
            this.text = "xxxx";
            // 使用$nextTick确保数据渲染（这个方法表示页面的结构一定已经生成好了，这个时候就可以调用节点生成二维码）
            this.$nextTick(() => {
            //生成二维码的方法
                this.creatQrCode();
            });
        }