使用vue-qr生成二维码(可以加logo)

一、安装

npm install vue-qr --save

如果失败了一般是因为这个包依赖canvas，canvas托管在github，国内访问容易超时，解决办法:
https://blog.csdn.net/EverRose/article/details/122846767

二、引入

vue2.x  import vueQr from 'vue-qr'
vue3.x  import vueQr from 'vue-qr/src/packages/vue-qr.vue'

三、使用

<vue-qr :size="200" :logo-src="qrcode.logo" :text="qrcode.text" />

import vueQr from 'vue-qr/src/packages/vue-qr.vue'

export default {
    components: {
      vueQr,
    },
    data() {
        return {
          qrcode: {
               text: 'https://www.baidu.com',
               logo: require('@/assets/qr_logo/baidu.png'),
           },
        } 
    }
}

 

结果：