vue项目生成二维码

使用vue生成二维码

安装

npm i qrcodejs2 --save

引入

import QRCode from 'qrcodejs2'

生成二维码

<template>
<div class="qrcode" ref="qrCodeDiv"></div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
  },
  methods: {
	creatQRCode() {
        const qrcode = 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.creatQRCode();
  },
};
</script>

清除二维码

//清除二维码
this.$refs.qrCodeDiv.innerHTML = "";
或者
qrcode.clear();