La cadena Vue genera componentes relacionados del código QR

1, código qr2

Esto depende del código js.

1. Instalación

npm i qrcodejs2 -S

2. uso

<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, ver-qr

Esto no necesita depender del código js, ​​puede usar componentes directamente.
1. Instalación

npm install vue-qr --save

2. Código QR del parámetro vue-qr
text , es decir, la página que se redirigirá después de escanear el código QR
sizeTamaño del código QR
marginMargen de la imagen del código QR, predeterminado 20px
bgSrcDirección de la imagen de fondo incrustada
logoSrcIncrustada en el centro del código QR Dirección del LOGOTIPO Tamaño de la imagen
logoScaleintermedia Tamaño del
dotScalepunto del código QR
colorDarkColor del punto sólido (nota: solo es válido cuando se configura junto con colorLight) Color
colorLighten blanco (nota: solo es válido cuando se configura junto con colorDark)
autoColorSi es cierto, el color principal de la imagen de fondo se usará como el color del punto sólido, es decir, el color Oscuro, predeterminado verdadero

3. Ejemplos

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