Contenu/lien d'entrée Vue pour générer un code QR

Méthode 1 : qrcode (pas d'icône)

npm i qrcodejs2 --save
   
   
    
    

code complet

   
   
    
    
< modèle >
< classe div = "flex-box" >
<div> qrcode ( pas d'icône icône ) </div>
< div class = "qr-code" ref = "qrCodeUrl" > < / div >
< / div >
< / modèle >

<script> _ _
importer le QRCode depuis 'qrcodejs2' ;

exporter par défaut {
date a() {
retourner {} ;
},
méthodes : {
/ * Créer un code QR * /
créerQrCode() {
nouveau QRCode(this.$refs.qrCodeUrl, {
texte : 'https://blog.csdn.net/AdminGuan' , // le contenu du code QR
largeur : 150 ,
hauteur : 150 ,
couleurFoncé : '#000' ,
couleurLumière : '#fff' ,
correctLevel : QRCode.CorrectLevel.H
});
}
},
monté() {
this.creatQrCode(); // Créer un code QR
}
} ;
< / script >

< portée du style >
.flex-box {
affichage : flexible;
align-items : center ;
justifier-contenu : centre ;
direction flexible : colonne ;
}
.QR Code {
remplissage : 10 px ;
marge supérieure : 20 px ;
couleur d'arrière-plan : #fff ;
bordure : 1 px rouge uni ;
}
< / style >
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

Méthode 2 : vue- qr (avec icône icône)

Adresse du site officiel : vue-qr-npm

npm install vue-qr --save
   
   
    
    

importer méthode d'importation

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

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

code complet

   
   
    
    
< modèle >
< classe div = "flex-box" >
< div > vue-qr (avec icône icône) < / div >
< vue-qr class = "qr-code" :logoSrc = "imageUrl" :text = "qrCodeUrl" : size = "150" / >
< / div >
< / modèle >

<script> _ _
importer vueQr depuis 'vue-qr' ; // vue 2.0 _
/ / import vueQr from 'vue-qr/src/packages/vue-qr.vue'; / / vue 3.0 (support vite)

exporter par défaut {
composants : { vueQr },
date a() {
retourner {
qrCodeUrl : 'https://blog.csdn.net/AdminGuan' , // le contenu du QR code
imageUrl: require( '../assets/default.jpg' ) / / icône路径
} ;
},
méthodes : {}
} ;
< / script >

< portée du style >
.flex-box {
affichage : flexible;
align-items : center ;
justifier-contenu : centre ;
direction flexible : colonne ;
}
.QR Code {
marge supérieure : 20 px ;
couleur d'arrière-plan : #fff ;
bordure : 1 px rouge uni ;
}
< / style >
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

Propriétés de configuration associées

Nom d'attribut	signification
texte	contenu codé
niveau correct	Niveau de tolérance (0 - 3)
taille	Dimensions, mêmes longueur et largeur, marges comprises
marge	La marge extérieure de l'image du code QR, la valeur par défaut est 20 px.
couleurFoncé	couleur unie
couleurLumière	la couleur de l'espace blanc
bgSrc	L'adresse de l'image de fond à intégrer
gifBgSrc	L'adresse gif de l'image d'arrière-plan à intégrer, l'image d'arrière-plan normale ne sera pas valide après le réglage. La définition de cette option affecte les performances
Couleur de l'arrière plan	Couleur de l'arrière plan
arrière-planGradation	La couleur superposée à l'image de fond est utile lorsque le décodage est difficile
logoSrc	Adresse du logo intégrée au centre du code QR
logoÉchelle	La valeur utilisée pour calculer la taille du logo, trop grande entraînera un échec de décodage, la formule de calcul de la taille du logo logoScale * (taille - 2 * marge), par défaut 0,2
logoMarge	La bordure vierge autour du logo, la valeur par défaut est 0
logoContexteCouleur	Couleur d'arrière-plan du logo, nécessité de définir la marge du logo
logoCoinRadius	Le rayon de congé du logo et sa bordure, la valeur par défaut est 0
Marge blanche	Si la valeur est true, une bordure blanche sera dessinée à l'extérieur de l'image d'arrière-plan.
échelle de points	Taux de réduction des points de la zone de données, la valeur par défaut est 0,35
couleurauto	Si vrai, l'image sera binarisée et la valeur par défaut sera utilisée si aucun seuil n'est spécifié
binarizeThreshold	(0 < seuil < 255) Seuil de binarisation
rappeler	L'URL des données du code QR générées peut être obtenue dans le rappel, le premier paramètre est l'URL des données du code QR et le deuxième paramètre est le qid transmis par les accessoires (car la génération du code QR est asynchrone, ajoutez donc un identifiant pour le tri)
liaisonElement	Spécifie s'il faut lier automatiquement le code QR généré au HTML, la valeur par défaut est true

Méthode 1 : qrcode (pas d'icône)

npm i qrcodejs2 --save
   
   
  
  

code complet

   
   
  
  
< modèle >
< classe div = "flex-box" >
<div> qrcode ( pas d'icône icône ) </div>
< div class = "qr-code" ref = "qrCodeUrl" > < / div >
< / div >
< / modèle >

<script> _ _
importer le QRCode depuis 'qrcodejs2' ;

exporter par défaut {
date a() {
retourner {} ;
},
méthodes : {
/ * Créer un code QR * /
créerQrCode() {
nouveau QRCode(this.$refs.qrCodeUrl, {
texte : 'https://blog.csdn.net/AdminGuan' , // le contenu du code QR
largeur : 150 ,
hauteur : 150 ,
couleurFoncé : '#000' ,
couleurLumière : '#fff' ,
correctLevel : QRCode.CorrectLevel.H
});
}
},
monté() {
this.creatQrCode(); // Créer un code QR
}
} ;
< / script >

< portée du style >
.flex-box {
affichage : flexible;
align-items : center ;
justifier-contenu : centre ;
direction flexible : colonne ;
}
.QR Code {
remplissage : 10 px ;
marge supérieure : 20 px ;
couleur d'arrière-plan : #fff ;
bordure : 1 px rouge uni ;
}
< / style >
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

Méthode 2 : vue- qr (avec icône icône)

Adresse du site officiel : vue-qr-npm

npm install vue-qr --save
   
   
  
  

importer méthode d'importation

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

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

code complet

   
   
  
  
< modèle >
< classe div = "flex-box" >
< div > vue-qr (avec icône icône) < / div >
< vue-qr class = "qr-code" :logoSrc = "imageUrl" :text = "qrCodeUrl" : size = "150" / >
< / div >
< / modèle >

<script> _ _
importer vueQr depuis 'vue-qr' ; // vue 2.0 _
/ / import vueQr from 'vue-qr/src/packages/vue-qr.vue'; / / vue 3.0 (support vite)

exporter par défaut {
composants : { vueQr },
date a() {
retourner {
qrCodeUrl : 'https://blog.csdn.net/AdminGuan' , // le contenu du QR code
imageUrl: require( '../assets/default.jpg' ) / / icône路径
} ;
},
méthodes : {}
} ;
< / script >

< portée du style >
.flex-box {
affichage : flexible;
align-items : center ;
justifier-contenu : centre ;
direction flexible : colonne ;
}
.QR Code {
marge supérieure : 20 px ;
couleur d'arrière-plan : #fff ;
bordure : 1 px rouge uni ;
}
< / style >
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

Propriétés de configuration associées

Nom d'attribut	signification
texte	contenu codé
niveau correct	Niveau de tolérance (0 - 3)
taille	Dimensions, mêmes longueur et largeur, marges comprises
marge	La marge extérieure de l'image du code QR, la valeur par défaut est 20 px.
couleurFoncé	couleur unie
couleurLumière	la couleur de l'espace blanc
bgSrc	L'adresse de l'image de fond à intégrer
gifBgSrc	L'adresse gif de l'image d'arrière-plan à intégrer, l'image d'arrière-plan normale ne sera pas valide après le réglage. La définition de cette option affecte les performances
Couleur de l'arrière plan	Couleur de l'arrière plan
arrière-planGradation	La couleur superposée à l'image de fond est utile lorsque le décodage est difficile
logoSrc	Adresse du logo intégrée au centre du code QR
logoÉchelle	La valeur utilisée pour calculer la taille du logo, trop grande entraînera un échec de décodage, la formule de calcul de la taille du logo logoScale * (taille - 2 * marge), par défaut 0,2
logoMarge	La bordure vierge autour du logo, la valeur par défaut est 0
logoContexteCouleur	Couleur d'arrière-plan du logo, nécessité de définir la marge du logo
logoCoinRadius	Le rayon de congé du logo et sa bordure, la valeur par défaut est 0
Marge blanche	Si la valeur est true, une bordure blanche sera dessinée à l'extérieur de l'image d'arrière-plan.
échelle de points	Taux de réduction des points de la zone de données, la valeur par défaut est 0,35
couleurauto	Si vrai, l'image sera binarisée et la valeur par défaut sera utilisée si aucun seuil n'est spécifié
binarizeThreshold	(0 < seuil < 255) Seuil de binarisation
rappeler	L'URL des données du code QR générées peut être obtenue dans le rappel, le premier paramètre est l'URL des données du code QR et le deuxième paramètre est le qid transmis par les accessoires (car la génération du code QR est asynchrone, ajoutez donc un identifiant pour le tri)
liaisonElement	Spécifie s'il faut lier automatiquement le code QR généré au HTML, la valeur par défaut est true