Vue输入内容/链接生成二维码

方式一：qrcode（无 icon 图标）

npm i qrcodejs2 --save
   
   
    
    

完整代码

   
   
    
    
<template >
<div class = "flex-box" >
<div >qrcode（无 icon 图标） < /div >
<div class = "qr-code" ref = "qrCodeUrl" > < /div >
< /div >
< /template >

<script >
import QRCode from 'qrcodejs2';

export default {
dat a() {
return {};
},
methods: {
/ * 创建二维码 * /
creatQrCode() {
new QRCode(this.$refs.qrCodeUrl, {
text: 'https://blog.csdn.net/AdminGuan', / / 二维码的内容
width: 150,
height: 150,
colorDark: '#000',
colorLight: '#fff',
correctLevel: QRCode.CorrectLevel.H
});
}
},
mounted() {
this.creatQrCode(); / / 创建二维码
}
};
< /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 >
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

方式二：vue-qr（有 icon 图标）

官网地址：vue-qr - npm

npm install vue-qr --save
   
   
    
    

import 引入方式

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

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

完整代码

   
   
    
    
<template >
<div class = "flex-box" >
<div >vue-qr（有 icon 图标） < /div >
<vue-qr class = "qr-code" :logoSrc = "imageUrl" :text = "qrCodeUrl" : size = "150" / >
< /div >
< /template >

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

export default {
components: { vueQr },
dat a() {
return {
qrCodeUrl: 'https://blog.csdn.net/AdminGuan', / / 二维码的内容
imageUrl: require( '../assets/default.jpg') / / icon路径
};
},
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 >
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

相关配置属性

属性名	含义
text	编码内容
correctLevel	容错级别（0 - 3）
size	尺寸，长宽一致, 包含外边距
margin	二维码图像的外边距，默认 20px
colorDark	实点的颜色
colorLight	空白区的颜色
bgSrc	欲嵌入的背景图地址
gifBgSrc	欲嵌入的背景图 gif 地址，设置后普通的背景图将失效。设置此选项会影响性能
backgroundColor	背景色
backgroundDimming	叠加在背景图上的颜色，在解码有难度的时有一定帮助
logoSrc	嵌入至二维码中心的 logo 地址
logoScale	用于计算 logo 大小的值，过大将导致解码失败，logo 尺寸计算公式 logoScale * (size - 2 * margin)，默认 0.2
logoMargin	logo 标识周围的空白边框，默认为 0
logoBackgroundColor	logo 背景色，需要设置 logo margin
logoCornerRadius	logo 标识及其边框的圆角半径，默认为 0
whiteMargin	若设为 true，背景图外将绘制白色边框
dotScale	数据区域点缩小比例，默认为 0.35
autoColor	若为 true，图像将被二值化处理，未指定阈值则使用默认值
binarizeThreshold	(0 < threshold < 255) 二值化处理的阈值
callback	生成的二维码 data url 可以在回调中取得，第一个参数为二维码 data url，第二个参数为 props 传过来的 qid(因为二维码生成是异步的，所以加个 id 用于排序)
bindElement	指定是否需要自动将生成的二维码绑定到 HTML 上，默认是 true

方式一：qrcode（无 icon 图标）

npm i qrcodejs2 --save
   
   
  
  

完整代码

   
   
  
  
<template >
<div class = "flex-box" >
<div >qrcode（无 icon 图标） < /div >
<div class = "qr-code" ref = "qrCodeUrl" > < /div >
< /div >
< /template >

<script >
import QRCode from 'qrcodejs2';

export default {
dat a() {
return {};
},
methods: {
/ * 创建二维码 * /
creatQrCode() {
new QRCode(this.$refs.qrCodeUrl, {
text: 'https://blog.csdn.net/AdminGuan', / / 二维码的内容
width: 150,
height: 150,
colorDark: '#000',
colorLight: '#fff',
correctLevel: QRCode.CorrectLevel.H
});
}
},
mounted() {
this.creatQrCode(); / / 创建二维码
}
};
< /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 >
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

方式二：vue-qr（有 icon 图标）

官网地址：vue-qr - npm

npm install vue-qr --save
   
   
  
  

import 引入方式

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

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

完整代码

   
   
  
  
<template >
<div class = "flex-box" >
<div >vue-qr（有 icon 图标） < /div >
<vue-qr class = "qr-code" :logoSrc = "imageUrl" :text = "qrCodeUrl" : size = "150" / >
< /div >
< /template >

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

export default {
components: { vueQr },
dat a() {
return {
qrCodeUrl: 'https://blog.csdn.net/AdminGuan', / / 二维码的内容
imageUrl: require( '../assets/default.jpg') / / icon路径
};
},
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 >
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

相关配置属性

属性名	含义
text	编码内容
correctLevel	容错级别（0 - 3）
size	尺寸，长宽一致, 包含外边距
margin	二维码图像的外边距，默认 20px
colorDark	实点的颜色
colorLight	空白区的颜色
bgSrc	欲嵌入的背景图地址
gifBgSrc	欲嵌入的背景图 gif 地址，设置后普通的背景图将失效。设置此选项会影响性能
backgroundColor	背景色
backgroundDimming	叠加在背景图上的颜色，在解码有难度的时有一定帮助
logoSrc	嵌入至二维码中心的 logo 地址
logoScale	用于计算 logo 大小的值，过大将导致解码失败，logo 尺寸计算公式 logoScale * (size - 2 * margin)，默认 0.2
logoMargin	logo 标识周围的空白边框，默认为 0
logoBackgroundColor	logo 背景色，需要设置 logo margin
logoCornerRadius	logo 标识及其边框的圆角半径，默认为 0
whiteMargin	若设为 true，背景图外将绘制白色边框
dotScale	数据区域点缩小比例，默认为 0.35
autoColor	若为 true，图像将被二值化处理，未指定阈值则使用默认值
binarizeThreshold	(0 < threshold < 255) 二值化处理的阈值
callback	生成的二维码 data url 可以在回调中取得，第一个参数为二维码 data url，第二个参数为 props 传过来的 qid(因为二维码生成是异步的，所以加个 id 用于排序)
bindElement	指定是否需要自动将生成的二维码绑定到 HTML 上，默认是 true