vue-qr生成二维码

説明

1.不支持ie（嘿嘿，微软定于2022年6月15日完全停止对其支持，转而使用Edge浏览器。不用担心这个问题了）
2.官网：https://www.npmjs.com/package/vue-qr

安装

// npm
npm install vue-qr --save

// yarn
yarn add vue-qr

引入

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

使用

<vue-qr ref="qrCode" :text="text" width="100" height="100" :logoSrc="logoPath" ></vue-qr>
...
components: {
  VueQr
},

• text：扫出来的结果
• logoSrc：图片logo，镶嵌在二维码中心
• 具体配置见官网

导入logo图片

1.引入，赋值变量使用

import logoImg from '../../../public/avatar2.jpg'
...
 data () {
    return {
      logoPath: logoImg
    }
  },

2.用require引入

 data () {
    return {
    logoPath: require('../../../public/avatar2.jpg')
    }
  },

下载

const link = document.createElement('a') // 创建一个超链接对象实例
     link.href = url
     link.setAttribute('download', '截图.png')
     link.click()