效果图：
使用过程如下：
1、安装 qrcodejs2
npm install qrcodejs2 --save
2、封装好的二维码组件
<template>
<div class="qrcode">
<div class="qrcode_content" :id="name"></div>
</div>
</template>
<script>
import QRcode from 'qrcodejs2';
let qrcode = '';
export default {
name: 'qrcode',
data() {
return {
}
},
computed:{
name:{
get(){
let sid = 'qrcode';
if(this.sid){
sid = this.sid;
}
return sid;
},
set(value){
this.name = value;
}
},
value:{
get(){
let value = 'https://blog.csdn.net/LiaoFengJi';
if(this.text){
value = this.text;
}
return value;
},
set(value){
this.value = value;
}
},
qrwidth(){
let width = 0;
if(this.swidth){
width = this.swidth; //370*320/(window.innerWidth)/20
}
else{
width = 5.33; //250*320/(window.innerWidth)/20
}
return width;
}
},
props:{
sid:{
type:String
},
text:{
type:String
},
swidth:{
type:Number
}
},
methods:{
qrcode() {
console.log('qrcode---------->',qrcode);
if(qrcode){
// qrcode.clear();
// qrcode.makeCode('new content');
qrcode = null;
}
else{
qrcode = new QRcode(this.name, {
width: this.qrwidth*20*(window.innerWidth)/320,
height: this.qrwidth*20*(window.innerWidth)/320, // 高度 ,250*320/(window.innerWidth)/20
text: this.value, // 二维码内容
image: '',
correctLevel : QRcode.CorrectLevel.L
//容错级别，可设置为：(低到高)
// QRCode.CorrectLevel.L
// QRCode.CorrectLevel.M
// QRCode.CorrectLevel.Q
// QRCode.CorrectLevel.H
// render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
// background: '#f0f'
// foreground: '#ff0'
})
}
console.log(qrcode)
}
},
destroyed(){
// qrcode.clear();
qrcode = null;
},
mounted(){
this.qrcode();
}
}
</script>
<style lang="less" scoped>
@import '../../common/style/style.css';
</style>
style.css文件：
.qrcode {
padding-top: 0.21333333rem;
padding-bottom: 0.21333333rem;
}
.qrcode .qrcode_content {
display: flex;
justify-content: center;
}
3、要生成二维码的页面
<template>
<div>
<Qrcode sid="url" :text="codeText" :swidth="swidth"></Qrcode>
</div>
</template>
<script>
import Qrcode from '../qrcode/qrcode';
export default {
data(){
return {
url:'',
codeText:''
}
},
components:{
Qrcode,
},
computed:{
swidth(){
return ((window.innerWidth*0.9)*0.4)*320/(window.innerWidth)/20; //370*320/(window.innerWidth)/20
}
},
mounted(){
this.url = this.QrcodeUrl;
this.codeText = this.QrcodeText;
}
}
</script>
<style lang="less" scoped>
@import '../../common/css/index.css';
</style>
