前端vue项目生成带logo的二维码

Vue 生成带 logo 的二维码

安装 vue_qrcodes

npm install --save vue_qrcodes
1

使用 vue_qrcodes

import qrcodes from "vue_qrcodes"
export default {
  components: { qrcodes },
  data() {
    return {
      codeLogo: require("../img/logo.png"),
      qrCodeText: '123456',
      codeSize: '',
      logoSize: '',
    }
  },
  created () {
    this.codeSize = document.documentElement.clientWidth * (200 / 375)
    this.logoSize = document.documentElement.clientWidth * (32 / 375)
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

页面标签

<qrcodes 
  :url="qrCodeText" 
  :iconurl="codeLogo" 
  :wid="codeSize" 
  :hei="codeSize" 
  :imgwid="logoSize" 
  :imghei="logoSize" 
/>
1
2
3
4
5
6
7
8