Vue generates QR code with logo

Vue generates QR code with logo

Install vue_qrcodes

npm install --save vue_qrcodes

Use vue_qrcodes

page import

import qrcodes from "vue_qrcodes"
export default {
  components: { qrcodes },
  data() {
    return {
      codeLogo: require("@/projects/wisdomcommunity/assets/images/wisdomcommunity/menjin/code-logo.png"),
      qrCodeText: '123456',
      codeSize: '',
      logoSize: '',
    }
  },
  created () {
    this.codeSize = document.documentElement.clientWidth * (200 / 375)
    this.logoSize = document.documentElement.clientWidth * (32 / 375)
  },
}

page tab

<qrcodes 
  :url="qrCodeText" 
  :iconurl="codeLogo" 
  :wid="codeSize" 
  :hei="codeSize" 
  :imgwid="logoSize" 
  :imghei="logoSize" 
/>

Parameter Description

Property	Description	Type	Accepted Values	Default
url	Values ​​of Qrcode two-dimensional code input content	String	-	www.baidu.com
iconurl	image of Qrcode The address of the small picture in the middle of the QR code	String	-	https://cn.vuejs.org/images/logo.png
wid	Qrcode width QR code width	Number	-	70
hey	Qrcode height QR code height	Number	-	70
colorDark	Qrcode color QR code color	String	-	#000000
colorLight	Qrcode background QR code background color	String	-	#ffffff
imgwid	Qrcode image width The width of the small image in the middle of the QR code	Number	-	30
imghei	Qrcode image height The height of the small image in the middle of the QR code	Number	-	30

resource

vue_qrcodes - npm vue component based on qrcode.js QR code package. Latest version: 1.1.3, last published: 3 years ago. Start using vue_qrcodes in your project by running `npm i vue_qrcodes`. There are 4 other projects in the npm registry using vue_qrcodes. https://www.npmjs.com/package/vue_qrcodes

GitHub - song776158074/vue-qrcode: Vue component based on qrcode.js two-dimensional code package . Contribute to song776158074/vue-qrcode development by creating an account on GitHub. https:// github.com/song776158074/vue-qrcode