vue 实现生成二维码

妮可儿blog

已于 2022-05-31 14:43:09 修改

阅读量192

点赞数

文章标签： vue.js javascript 前端

于 2022-05-24 13:53:39 首次发布

原文链接：https://blog.csdn.net/weixin_44801790/article/details/124795078

版权

1、安装qrcodejs2

npm install  qrcodejs2 --save

2、组件中引用

import QRCode from 'qrcodejs2'

3、使用

<div class="qrCode" ref="qrCodeDiv"></div>

methods(){
 bindQRCode () {
      this.$refs.qrCodeDiv.innerHTML = "";
      //获取浏览器地址
      const ipPort = document.location.protocol + "//" + document.location.host;
      this.qrCodeImg = null;
      this.qrCodeImg = new QRCode(this.$refs.qrCodeDiv, {
        width: 150,
        height: 150,
        text: ipPort + '/details.html?id=' +  this.id,
        colorDark: "#000",
        colorLight: "#fff",
        correctLevel: QRCode.CorrectLevel.H
      });
    }
},
mounted () {
	this.bindQRCode()
}