Vue 二维码生成及动态变化

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<template>
  <div class="qrcode" />
</template>

<script>
import QRCode2 from 'qrcodejs2'

export default {
  props: {
    text: {
      type: String,
      required: true,
    },
    width: {
      type: Number,
      default: 100,
    },
    height: {
      type: Number,
      default: 100,
    },
    colorDark: {
      type: String,
      default: '#000000',
    },
    colorLight: {
      type: String,
      default: '#FFFFFF',
    },
  },
  watch: {
    'text': {
      immediate: true,
      handler(text) {
        if (!text) return
        this.$nextTick(() => {
          if (!this.qrcode) this.qrcode = new QRCode2(this.$el, { ...this.$props, correctLevel: QRCode2.CorrectLevel.H })
          else this.qrcode.makeCode(text)
        })
      },
    }
  },
  destroyed() {
    this.qrcode && this.qrcode.clear()
  },
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <!-- 你的 Dom -->
  <QRCode text="https://www.baidu.com" :height="200" :width="200" />
  <!-- 你的 Dom -->
</template>

<script>
import QRCode from '@/components/QRCode' // 导入你的文件, 这里按照@快捷路径导入

export default {
  components: { QRCode },
}
</script>