vue如何生成二维码

以下是两种在Vue中生成二维码的方法：

1.使用vue-qr组件生成二维码，可以在二维码中添加logo图标：

<template>
  <div>
    <vue-qr :logoSrc="imageUrl" text="https://blog.csdn.net/weixin_42601136" :size="200"></vue-qr>
  </div>
</template>

<script>
import vueQr from 'vue-qr'

export default {
  name: "qecode",
  data() {
    return {
      imageUrl: require("../img/logo.png"),//icon路径
    }
  },
  components: {
    vueQr
  },
}
</script>

2.使用第三方库qrcode生成二维码：

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

<script>
import QRCode from 'qrcode'

export default {
  name: "qrcode",
  mounted() {
    this.generateQRCode()
  },
  methods: {
    generateQRCode() {
      const canvas = this.$refs.canvas
      QRCode.toCanvas(canvas, 'https://blog.csdn.net/weixin_42601136', function (error) {
        if (error) console.error(error)
        console.log('success!');
      })
    }
  }
}
</script>