使用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'),
           },
        } 
    }
}

 

結果：