vue项目使用qrcode插件生成二维码

下载

npm i qrcodejs2 --save

  
 

  
1
 

导入

import QRCode from 'qrcodejs2'

  
 

  
1
 

使用

<div class="qrcode" ref="qrCodeDiv"></div>
<script>
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
  },
  methods: {
	bindQRCode() {
      this.$nextTick(() => {
        new QRCode(this.$refs.qrCodeDiv, {
          text: url,//url地址  文本等需要转换为二维码的内容
          width: 80,
          height: 80,
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
        });
      });
    },
  },
  mounted() {
    this.bindQRCode();
  },
};
</script>

  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
 

清除

//清除二维码
this.$refs.qrCodeDiv.innerHTML = "";

  
 

  
1
  
2
 

或者你还可以这么写

var qrcode = document.getElementById("qrcode");
var qrcode = new QRCode(qrcode , {
	text: "https://www.baidu.com/",
	width: 128,
	height: 128,
	colorDark : "#000000",
	colorLight : "#ffffff",
	correctLevel : QRCode.CorrectLevel.H
});

  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

qrcode.clear(); // 清除.
qrcode.makeCode("二维码承载的信息"); // make another code.
  
 

  
1
  
2
  
3
 

文章来源: jiangwenxin.blog.csdn.net，作者：前端江太公，版权归原作者所有，如需转载，请联系作者。

原文链接：jiangwenxin.blog.csdn.net/article/details/125209355