vue-cli生成二维码

vue使用qrcode生成二维码

转载 https://blog.csdn.net/weixin_42890953/article/details/82776760

使用npm 安装插件

npm i qrcode --save

template 模板
qrCodeDialogVisible 加载弹窗显示值为 true 或 false
qrCodeHandleClose() 关闭弹窗回调函数 按需求设置
qrCodeCreate() 生成二维码函数

<template>
  <div class="hello">
		<el-dialog
		      title="请用微信扫描二维码支付押金"
		      :visible.sync="qrCodeDialogVisible"
		      @opened="qrCodeCreate"
		      width="20%"
		      :before-close="qrCodeHandleClose"
		    >
		      <div id="qrCode" class="myqrCode">
		        <div id="code"></div>
		        <canvas id="canvas"></canvas>
		      </div>
		    </el-dialog>
     </div>
  </template>

在使用页面引入插件即可

import QRCode from "qrcode";

export default {
  name: "HelloWorld",
  components: {
    QRCode: QRCode
  },
  data() {
    return {
        qrCodeDialogVisible: false,
    	qrTexxt: 'https://www.baidu.com'
    }
 }，
 method(){
	qrCodeCreate() { // 生成二维码
      var _this = this;
      var canvas = document.getElementById("canvas");
      // _this.qrTexxt vue属性值为 https://www.baidu.com
      QRCode.toCanvas(canvas, _this.qrTexxt, function (error) {
        if (error) console.error(error);
        console.log("QRCode success!");
      });
    },
    qrCodeHandleClose() { //关闭弹窗
      this.qrCodeDialogVisible = false;
    }
 },
 mounted() {
    this.qrCodeDialogVisible=true; // 显示弹弹窗
  }
}

显示弹窗

open(){ // 打开弹窗
	this.qrCodeDialogVisible=true;
}

以上就可以生成不带图片的二维码

生成二维码就完成了，

有一个问题，动态 更换二维码内容是不刷新

open(){ // 打开弹窗
	this.qrText='https://editor.csdn.net/' // 给属性重新赋值
	this.qrCodeDialogVisible=true;
}

此时二维码显示空白,以下我的解决方案仅供参考
qrCodeCreate() 改进函数

qrCodeCreate() {
      var _this = this;
      document.getElementById("canvas").innerHTML = ""; // 每次加载，元素清空
      var canvas = document.getElementById("canvas");
     
     // 将属性拼接字符串即可
      var test = _this.qrtext + "";
      QRCode.toCanvas(canvas, test, function (error) {
        if (error) console.error(error);
        console.log("QRCode success!");
      });
    }

以上是生成二维码，有什么问题请在下方留言