Vue qrcodejs2 生成二维码

Gtihub：https://github.com/davidshimjs/qrcodejs

Npm：https://www.npmjs.com/package/qrcodejs2

QRCode.js是用于制作二维码的JavaScript库。通过HTML5 Canvas和DOM中的表格标签支持跨浏览器。

安装

npm i qrcodejs2

基础使用

<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie");
</script>
or with some options

<div id="qrcode"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
	text: "http://jindo.dev.naver.com/collie",
	width: 128,
	height: 128,
	colorDark : "#000000",
	colorLight : "#ffffff",
	correctLevel : QRCode.CorrectLevel.H
});
</script>
and you can use some methods

qrcode.clear(); // clear the code.
qrcode.makeCode("http://naver.com"); // make another code.

Vue

<template>
  <div class="qrcode-wrap" :ref="qrcodeRef"></div>
</template>

<script>
import QRCode from "qrcodejs2";

export default {
  name: "QRCode",
  data() {
    return {
      qrcodeRef: `qrcode-${this._uid}`,
      defaultOptions: {
        // width: "100%",
        // height: "100%",
        width: "128",
        height: "128",
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      }
    };
  },
  props: {
    text: {
      type: [String],
      default: "",
      require: false
    },
    width: {
      type: [Number],
      default: 128,
      require: false
    },
    height: {
      type: [Number],
      default: 128,
      require: false
    },
    options: {
      type: [Object],
      default() {
        return {};
      },
      require: false
    }
  },
  computed: {
    qrcodeOptions() {
      return Object.assign(this.defaultOptions, {
        ...this.options,
        text: this.text,
        width: this.width,
        height: this.height
      });
    }
  },
  methods: {
    initQRCode() {
      this.qrcode = new QRCode(this.$refs[this.qrcodeRef], this.qrcodeOptions);
    },
    makeQRCode() {
      this.qrcode & this.qrcode.makeCode(this.text);
    },
    destroyQRCode() {
      this.qrcode && this.qrcode.clear();
      delete this.qrcode;
    }
  },
  watch: {
    text() {
      this.makeQRCode();
    },
    options() {
      this.initQRCode();
    }
  },
  mounted() {
    this.initQRCode();
  },
  destroyed() {
    this.destroyQRCode();
  }
};
</script>

<style></style>