In-depth understanding of Vue's method of generating QR codes using vue-qr

The English name of “QR Code” is “QR Code”. “QR” is the abbreviation of “Quick Response”, which reflects that this QR code has the characteristic of “ultra-high-speed reading”. “Quick Response Code” means “Quick response code”.

npm download

npm install vue-qr --save

Download Success:

step

(1) Import

import VueQr from 'vue-qr'

(2) vue-qr parameters

• text QR code, that is, the page you jump to after scanning the QR code
• size QR code size
• margin The margin of the QR code image, default 20px
• bgSrc embedded background image address
• logoSrc is embedded into the LOGO address in the center of the QR code
• logoScale size of the middle image
• dotScale The size of the dots in the QR code
• colorDark The color of the solid point (Note: only valid when set together with colorLight)
• colorLight blank color (Note: only works when set with colorDark)
• If autoColor is true, the main color of the background image will be used as the color of the solid point, that is, colorDark. The default is true

Example

<template>
   <div>
      <vue-qr
         :text="imgUrl"
         :size="250"
         :logoSrc="logo"
         :logoScale="0.2">
      </vue-qr>
   </div>
</template>
<script>
import VueQr from 'vue-qr'
export default {
   name:'', 
   components:{
      VueQr,
   },
   data() {
      return {
         imgUrl: 'https://baidu.com',
         logo: require('@/assets/tea_128.png'),
      }
   },
   methods:{
   },
}
</script>

result:

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!