Vue string generates related components of QR code

1、qrcode2

This depends on js code.

1. Installation

npm i qrcodejs2 -S

2. Use

<div id="qrcode" ref="qrcode"></div>

this.qr = new QRCode('qrcode', {
    
    
      width: 150,
      height: 150, // 高度
      text: this.qrcode // 二维码内容
      // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
      // background: '#f0f'
      // foreground: '#ff0'
})

2、view-qr

This does not need to rely on js code, you can use components directly.
1. Installation

npm install vue-qr --save

2. vue-qr parameters
text QR code, that is, the page to be redirected after scanning the QR
sizecode QR code size QR
margincode image margin, default 20px
bgSrcEmbedded background image address
logoSrcEmbedded in the QR code center LOGO address
logoScaleMiddle image size
dotScaleQR code point size Solid
colorDarkpoint color (note: it is valid only when set together with colorLight)
colorLightBlank color (note: it is valid only when set together with colorDark)
autoColorIf true, the main color of the background image will be used as the color of the solid point, ie color Dark, default true

3. Examples

<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>