Vue ingresa contenido/enlace para generar código QR

Método 1: qrcode (sin icono)

npm i qrcodejs2 --save
   
   
    
    

código completo

   
   
    
    
< plantilla >
< clase div = "caja flexible" >
<div> qrcode ( sin icono icono ) </div>
< div clase = "código qr" ref = "qrCodeUrl" > < / div >
< / div >
< / plantilla >

< guión >
importar código QR desde 'qrcodejs2' ;

exportar predeterminado {
eso es () {
devolver {};
},
métodos: {
/ * Crear código QR * /
creatQrCode() {
nuevo QRCode(this.$refs.qrCodeUrl, {
texto: 'https://blog.csdn.net/AdminGuan' , // el contenido del código QR
ancho: 150 ,
altura: 150 ,
colorOscuro: '#000' ,
colorLuz: '#fff' ,
NivelCorrecto: QRCode.CorrectLevel.H
});
}
},
montado() {
this.creatQrCode(); // Crea un código QR
}
};
< / guión >

< ámbito de estilo >
.caja flexible {
pantalla : flexible;
alinear elementos: centro;
justificar-contenido: centro;
dirección flexible: columna ;
}
.Código QR {
relleno: 10 píxeles;
margen superior: 20 px;
color de fondo: #fff;
borde: 1 px rojo sólido;
}
< / estilo >
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

Método 2: vue- qr (con icono icono)

Dirección del sitio web oficial: vue-qr-npm

npm install vue-qr --save
   
   
    
    

importar método de importación

import vueQr from 'vue-qr'; // vue2.0
   
   
    
    

import vueQr from 'vue-qr/src/packages/vue-qr.vue'; // vue3.0 (support vite)
   
   
    
    

código completo

   
   
    
    
< plantilla >
< clase div = "caja flexible" >
<div> vue-qr ( con icono icono ) </div>
< vue-qr class = "qr-code" :logoSrc = "imageUrl" :text = "qrCodeUrl" : tamaño = "150" / >
< / div >
< / plantilla >

< guión >
importar vueQr desde 'vue-qr' ; // ver 2.0 _
// importar vueQr desde ' vue-qr/src/packages/vue-qr.vue' ; // ver 3.0 ( soporte rápido )

exportar predeterminado {
componentes: { vueQr },
eso es () {
devolver {
qrCodeUrl: 'https://blog.csdn.net/AdminGuan' , // el contenido del código QR
imageUrl: require( '../assets/default.jpg' ) // icon路径
};
},
métodos: {}
};
< / guión >

< ámbito de estilo >
.caja flexible {
pantalla : flexible;
alinear elementos: centro;
justificar-contenido: centro;
dirección flexible: columna ;
}
.Código QR {
margen superior: 20 px;
color de fondo: #fff;
borde: 1 px rojo sólido;
}
< / estilo >
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

Propiedades de configuración relacionadas

Nombre del Atributo	significado
texto	contenido codificado
nivel correcto	Nivel de tolerancia (0 - 3)
tamaño	Dimensiones, mismo largo y ancho, incluidos márgenes.
margen	El margen exterior de la imagen del código QR, el valor predeterminado es 20px
colorOscuro	color sólido
colorLuz	el color del espacio en blanco
bgSrc	La dirección de la imagen de fondo que se va a incrustar.
gifBgSrc	La dirección gif de la imagen de fondo que se va a incrustar; la imagen de fondo normal no será válida después de la configuración. Establecer esta opción afecta el rendimiento
color de fondo	color de fondo
fondoAtenuación	El color superpuesto a la imagen de fondo es útil cuando la decodificación es difícil.
logoSrc	Dirección del logotipo incrustada en el centro del código QR
logoEscala	El valor utilizado para calcular el tamaño del logotipo es demasiado grande y provocará un error de decodificación. La fórmula de cálculo del tamaño del logotipo es logoScale * (tamaño - 2 * margen), predeterminado 0,2.
logotipoMargen	El borde en blanco alrededor del logotipo, el valor predeterminado es 0
logofondocolor	Color de fondo del logotipo, es necesario establecer el margen del logotipo
logoEsquinaRadio	El radio de filete del logotipo y su borde, el valor predeterminado es 0
blancoMargen	Si se establece en verdadero, se dibujará un borde blanco fuera de la imagen de fondo.
escala de puntos	Relación de reducción de puntos del área de datos, el valor predeterminado es 0,35
color automático	Si es verdadero, la imagen se binarizará y se utilizará el valor predeterminado si no se especifica ningún umbral.
binarizarUmbral	(0 < umbral < 255) Umbral para binarización
llamar de vuelta	La URL de datos del código QR generado se puede obtener en la devolución de llamada, el primer parámetro es la URL de datos del código QR y el segundo parámetro es el qid pasado desde los accesorios (debido a que la generación del código QR es asíncrona, agregue una identificación para ordenar)
enlazarElemento	Especifica si se vincula automáticamente el código QR generado a HTML; el valor predeterminado es verdadero

Método 1: qrcode (sin icono)

npm i qrcodejs2 --save
   
   
  
  

código completo

   
   
  
  
< plantilla >
< clase div = "caja flexible" >
<div> qrcode ( sin icono icono ) </div>
< div clase = "código qr" ref = "qrCodeUrl" > < / div >
< / div >
< / plantilla >

< guión >
importar código QR desde 'qrcodejs2' ;

exportar predeterminado {
eso es () {
devolver {};
},
métodos: {
/ * Crear código QR * /
creatQrCode() {
nuevo QRCode(this.$refs.qrCodeUrl, {
texto: 'https://blog.csdn.net/AdminGuan' , // el contenido del código QR
ancho: 150 ,
altura: 150 ,
colorOscuro: '#000' ,
colorLuz: '#fff' ,
NivelCorrecto: QRCode.CorrectLevel.H
});
}
},
montado() {
this.creatQrCode(); // Crea un código QR
}
};
< / guión >

< ámbito de estilo >
.caja flexible {
pantalla : flexible;
alinear elementos: centro;
justificar-contenido: centro;
dirección flexible: columna ;
}
.Código QR {
relleno: 10 píxeles;
margen superior: 20 px;
color de fondo: #fff;
borde: 1 px rojo sólido;
}
< / estilo >
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

Método 2: vue- qr (con icono icono)

Dirección del sitio web oficial: vue-qr-npm

npm install vue-qr --save
   
   
  
  

importar método de importación

import vueQr from 'vue-qr'; // vue2.0
   
   
  
  

import vueQr from 'vue-qr/src/packages/vue-qr.vue'; // vue3.0 (support vite)
   
   
  
  

código completo

   
   
  
  
< plantilla >
< clase div = "caja flexible" >
<div> vue-qr ( con icono icono ) </div>
< vue-qr class = "qr-code" :logoSrc = "imageUrl" :text = "qrCodeUrl" : tamaño = "150" / >
< / div >
< / plantilla >

< guión >
importar vueQr desde 'vue-qr' ; // ver 2.0 _
// importar vueQr desde ' vue-qr/src/packages/vue-qr.vue' ; // ver 3.0 ( soporte rápido )

exportar predeterminado {
componentes: { vueQr },
eso es () {
devolver {
qrCodeUrl: 'https://blog.csdn.net/AdminGuan' , // el contenido del código QR
imageUrl: require( '../assets/default.jpg' ) // icon路径
};
},
métodos: {}
};
< / guión >

< ámbito de estilo >
.caja flexible {
pantalla : flexible;
alinear elementos: centro;
justificar-contenido: centro;
dirección flexible: columna ;
}
.Código QR {
margen superior: 20 px;
color de fondo: #fff;
borde: 1 px rojo sólido;
}
< / estilo >
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

Propiedades de configuración relacionadas

Nombre del Atributo	significado
texto	contenido codificado
nivel correcto	Nivel de tolerancia (0 - 3)
tamaño	Dimensiones, mismo largo y ancho, incluidos márgenes.
margen	El margen exterior de la imagen del código QR, el valor predeterminado es 20px
colorOscuro	color sólido
colorLuz	el color del espacio en blanco
bgSrc	La dirección de la imagen de fondo que se va a incrustar.
gifBgSrc	La dirección gif de la imagen de fondo que se va a incrustar; la imagen de fondo normal no será válida después de la configuración. Establecer esta opción afecta el rendimiento
color de fondo	color de fondo
fondoAtenuación	El color superpuesto a la imagen de fondo es útil cuando la decodificación es difícil.
logoSrc	Dirección del logotipo incrustada en el centro del código QR
logoEscala	El valor utilizado para calcular el tamaño del logotipo es demasiado grande y provocará un error de decodificación. La fórmula de cálculo del tamaño del logotipo es logoScale * (tamaño - 2 * margen), predeterminado 0,2.
logotipoMargen	El borde en blanco alrededor del logotipo, el valor predeterminado es 0
logofondocolor	Color de fondo del logotipo, es necesario establecer el margen del logotipo
logoEsquinaRadio	El radio de filete del logotipo y su borde, el valor predeterminado es 0
blancoMargen	Si se establece en verdadero, se dibujará un borde blanco fuera de la imagen de fondo.
escala de puntos	Relación de reducción de puntos del área de datos, el valor predeterminado es 0,35
color automático	Si es verdadero, la imagen se binarizará y se utilizará el valor predeterminado si no se especifica ningún umbral.
binarizarUmbral	(0 < umbral < 255) Umbral para binarización
llamar de vuelta	La URL de datos del código QR generado se puede obtener en la devolución de llamada, el primer parámetro es la URL de datos del código QR y el segundo parámetro es el qid pasado desde los accesorios (debido a que la generación del código QR es asíncrona, agregue una identificación para ordenar)
enlazarElemento	Especifica si se vincula automáticamente el código QR generado a HTML; el valor predeterminado es verdadero