Jeff.RFID.UI/src/components/QrCodeView.vue

<template>
  <div class="wrapper relative">
    <img :src="dataUrl" width="100%" height="100%" />
  </div>
</template>

<script>
import QrCode from 'qrcode'

export default {
  name: 'QrCodeView',
  props: {
    code: {
      type: String,
      required: true
    }
  },
  data: () => ({
    dataUrl: ''
  }),
  methods: {
    genQRCode () {
      const { qrCodeCanvas } = this.$refs
      const { code } = this
      if (code) {
        QrCode.toDataURL(code, {
          margin: 0
        }, (error, url) => {
          if (error) {
            console.error(error)
          } else {
            this.dataUrl = url
          }
        })
      } else {
        const ctx = qrCodeCanvas.getContext('2d')
        ctx.clearRect(0, 0, qrCodeCanvas.width, qrCodeCanvas.height)
      }
    },
    render () {
      this.genQRCode()
    },
    clearResizeTimer () {
      clearTimeout(this.resizeTimer)
    },
    onWindowResize () {
      this.clearResizeTimer()
      this.resizeTimer = setTimeout(() => {
        this.render()
      }, 100)
    }
  },
  watch: {
    code () {
      this.genQRCode()
    }
  },
  created () {
    window.addEventListener('resize', this.onWindowResize)
  },
  mounted () {
    this.render()
  },
  beforeDestroy () {
    this.clearResizeTimer()
    window.removeEventListener('resize', this.onWindowResize)
  }
}
</script>

<style lang="scss"></style>