VUE 生成二维码(qrcodejs)

Posted 2021-12-10 晚星@

npm install qrcodejs2 --save

<template>
  <div>
    <div id="qrCode"
         ref="qrCodeDiv"></div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';
export default {
  name: "qrCode",
  data () {
    return {}
  },
  mounted: function () {
    this.$nextTick(function () {
      this.bindQRCode();
    })
  },
  methods: {
    bindQRCode: function () {
      new QRCode(this.$refs.qrCodeDiv, {
        text: 'http://10.246.138.84/hrs-ess-new-view/img/ess-app-release-v1.0.apk',
        width: 200,
        height: 200,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
      })
    }
  }
}
</script>

<style>
</style>

样式如下：