shebei_demo/src/components/QrCode.vue

<template>
  <canvas ref="canvas"></canvas>
</template>

<script>
import QRCode from 'qrcode'

export default {
  name: 'QrCode',
  props: {
    value: { type: String, default: '' },
    size: { type: Number, default: 52 }
  },
  mounted() {
    this.render()
  },
  watch: {
    value: 'render'
  },
  methods: {
    // 使用 qrcode 库在 canvas 上生成二维码
    render() {
      QRCode.toCanvas(this.$refs.canvas, this.value || 'device', {
        width: this.size,
        margin: 1,
        color: { dark: '#000000', light: '#ffffff' }
      }).catch(() => {})
    }
  }
}
</script>