Vue input content/link to generate QR code

Method 1: qrcode (no icon icon)

npm i qrcodejs2 --save
   
   
    
    

full code

   
   
    
    
<template >
<div class = "flex-box" >
<div > qrcode (no icon icon) < /div >
< div class = "qr-code" ref = "qrCodeUrl" > < / div >
< / div >
< /template >

<script >
import QRCode from 'qrcodejs2';

export default {
that a() {
return {};
},
methods: {
/ * Create QR code * /
creatQrCode() {
new QRCode(this.$refs.qrCodeUrl, {
text: 'https://blog.csdn.net/AdminGuan', / / QR code content
width: 150,
height: 150 ,
colorDark: '#000',
colorLight: '#fff',
correctLevel: QRCode.CorrectLevel.H
});
}
},
mounted() {
this.creatQrCode(); / / create QR code
}
};
< /script >

<style scoped >
.flex-box {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.qr-code {
padding: 10px;
margin-top: 20px;
background-color: #fff;
border: 1px solid red;
}
< /style >

   
   
    
    

     
    
     
    
     
     
     
     
   
     
   
     
    
    

   
   
    
    

Method 2: vue- qr (with icon icon)

Official website address: vue-qr-npm

npm install vue-qr --save
   
   
    
    

import import method

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

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

full code

   
   
    
    
<template >
<div class = "flex-box" >
<div > vue-qr (with icon icon) < /div >
< view-qr class = "qr-code" :logoSrc = "imageUrl" :text = "qrCodeUrl" : size = "150" / >
< / div >
< /template >

<script >
import vueQr from 'view-qr' ; / / vue 2.0
/ / import vueQr from 'vue-qr/src/packages/vue-qr.vue' ; / / vue 3.0 (quick support)

export default {
components: { vueQr },
that a() {
return {
qrCodeUrl: 'https://blog.csdn.net/AdminGuan', / / QR code content
imageUrl: require( '../assets/default.jpg') / / icon path
};
},
methods: {}
};
< /script >

<style scoped >
.flex-box {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.qr-code {
margin-top: 20px;
background-color: #fff;
border: 1px solid red;
}
< /style >

   
   
    
    

     
    
     
    
     
     
     
     
   
     
   
     
    
    

   
   
    
    

Related Configuration Properties

attribute name	meaning
text	encoded content
correctLevel	Tolerance level (0 - 3)
size	Dimensions, same length and width, including margins
margin	The outer margin of the QR code image, the default is 20px
colorDark	solid color
colorLight	the color of the white space
bgSrc	The address of the background image to be embedded
gifBgSrc	The gif address of the background image to be embedded, the normal background image will be invalid after setting. Setting this option affects performance
backgroundColor	background color
backgroundDimming	The color superimposed on the background image is helpful when decoding is difficult
logoSrc	Logo address embedded in the center of the QR code
logoScale	The value used to calculate the logo size, too large will cause decoding failure, the logo size calculation formula logoScale * (size - 2 * margin), default 0.2
logoMargin	The blank border around the logo, the default is 0
logoBackgroundColor	Logo background color, need to set logo margin
logoCornerRadius	The fillet radius of the logo and its border, the default is 0
whiteMargin	If set to true, a white border will be drawn outside the background image
dotScale	Data area point reduction ratio, the default is 0.35
autoColor	If true, the image will be binarized, and the default value will be used if no threshold is specified
binarizeThreshold	(0 < threshold < 255) Threshold for binarization
callback	The generated QR code data url can be obtained in the callback, the first parameter is the QR code data url, and the second parameter is the qid passed from props (because the QR code generation is asynchronous, so add an id for sort)
bindElement	Specifies whether to automatically bind the generated QR code to HTML, the default is true

Method 1: qrcode (no icon icon)

npm i qrcodejs2 --save
   
   
  
  

full code

   
   
  
  
<template >
<div class = "flex-box" >
<div > qrcode (no icon icon) < /div >
<div class = "qr-code" ref = "qrCodeUrl" > < / div >
< / div >
< /template >

<script >
import QRCode from 'qrcodejs2';

export default {
that a() {
return {};
},
methods: {
/ * Create QR code * /
creatQrCode() {
new QRCode(this.$refs.qrCodeUrl, {
text: 'https://blog.csdn.net/AdminGuan', / / QR code content
width: 150,
height: 150 ,
colorDark: '#000',
colorLight: '#fff',
correctLevel: QRCode.CorrectLevel.H
});
}
},
mounted() {
this.creatQrCode(); / / create QR code
}
};
< /script >

<style scoped >
.flex-box {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.qr-code {
padding: 10px;
margin-top: 20px;
background-color: #fff;
border: 1px solid red;
}
< /style >

   
   
  
  

   
    
   
    
   
   
   
   
   
   
   
   
  
  

   
   
  
  

Method 2: vue- qr (with icon icon)

Official website address: vue-qr-npm

npm install vue-qr --save
   
   
  
  

import import method

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

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

full code

   
   
  
  
<template >
<div class = "flex-box" >
<div > vue-qr (with icon icon) < /div >
< view-qr class = "qr-code" :logoSrc = "imageUrl" :text = "qrCodeUrl" : size = "150" / >
< / div >
< /template >

<script >
import vueQr from 'view-qr' ; / / vue 2.0
/ / import vueQr from 'vue-qr/src/packages/vue-qr.vue' ; / / vue 3.0 (quick support)

export default {
components: { vueQr },
that a() {
return {
qrCodeUrl: 'https://blog.csdn.net/AdminGuan' , / / QR code content
imageUrl: require( '../assets/default.jpg') / / icon path
};
},
methods: {}
};
< /script >

<style scoped >
.flex-box {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.qr-code {
margin-top: 20px;
background-color: #fff;
border: 1px solid red;
}
< /style >

   
   
  
  

   
    
   
    
   
   
   
   
   
   
   
   
  
  

   
   
  
  

Related Configuration Properties

attribute name	meaning
text	encoded content
correctLevel	Tolerance level (0 - 3)
size	Dimensions, same length and width, including margins
margin	The outer margin of the QR code image, the default is 20px
colorDark	solid color
colorLight	the color of the white space
bgSrc	The address of the background image to be embedded
gifBgSrc	The gif address of the background image to be embedded, the normal background image will be invalid after setting. Setting this option affects performance
backgroundColor	background color
backgroundDimming	The color superimposed on the background image is helpful when decoding is difficult
logoSrc	Logo address embedded in the center of the QR code
logoScale	The value used to calculate the logo size, too large will cause decoding failure, the logo size calculation formula logoScale * (size - 2 * margin), default 0.2
logoMargin	The blank border around the logo, the default is 0
logoBackgroundColor	Logo background color, need to set logo margin
logoCornerRadius	The fillet radius of the logo and its border, the default is 0
whiteMargin	If set to true, a white border will be drawn outside the background image
dotScale	Data area point reduction ratio, the default is 0.35
autoColor	If true, the image will be binarized, and the default value will be used if no threshold is specified
binarizeThreshold	(0 < threshold < 255) Threshold for binarization
callback	The generated QR code data url can be obtained in the callback, the first parameter is the QR code data url, and the second parameter is the qid passed from props (because the QR code generation is asynchronous, so add an id for sort)
bindElement	Specifies whether to automatically bind the generated QR code to HTML, the default is true