vue使用qrcode生成二维码
转载 https://blog.csdn.net/weixin_42890953/article/details/82776760
使用npm 安装插件
npm i qrcode --save
template 模板
qrCodeDialogVisible 加载弹窗显示值为 true 或 false
qrCodeHandleClose() 关闭弹窗回调函数 按需求设置
qrCodeCreate() 生成二维码函数
<template>
<div class="hello">
<el-dialog
title="请用微信扫描二维码支付押金"
:visible.sync="qrCodeDialogVisible"
@opened="qrCodeCreate"
width="20%"
:before-close="qrCodeHandleClose"
>
<div id="qrCode" class="myqrCode">
<div id="code"></div>
<canvas id="canvas"></canvas>
</div>
</el-dialog>
</div>
</template>
在使用页面引入插件即可
import QRCode from "qrcode";
export default {
name: "HelloWorld",
components: {
QRCode: QRCode
},
data() {
return {
qrCodeDialogVisible: false,
qrTexxt: 'https://www.baidu.com'
}
},
method(){
qrCodeCreate() { // 生成二维码
var _this = this;
var canvas = document.getElementById("canvas");
// _this.qrTexxt vue属性值为 https://www.baidu.com
QRCode.toCanvas(canvas, _this.qrTexxt, function (error) {
if (error) console.error(error);
console.log("QRCode success!");
});
},
qrCodeHandleClose() { //关闭弹窗
this.qrCodeDialogVisible = false;
}
},
mounted() {
this.qrCodeDialogVisible=true; // 显示弹弹窗
}
}
显示弹窗
open(){ // 打开弹窗
this.qrCodeDialogVisible=true;
}
以上就可以生成不带图片的二维码
生成二维码就完成了,
有一个问题,动态 更换二维码内容是不刷新
open(){ // 打开弹窗
this.qrText='https://editor.csdn.net/' // 给属性重新赋值
this.qrCodeDialogVisible=true;
}
此时二维码显示空白,以下我的解决方案仅供参考
qrCodeCreate() 改进函数
qrCodeCreate() {
var _this = this;
document.getElementById("canvas").innerHTML = ""; // 每次加载,元素清空
var canvas = document.getElementById("canvas");
// 将属性拼接字符串即可
var test = _this.qrtext + "";
QRCode.toCanvas(canvas, test, function (error) {
if (error) console.error(error);
console.log("QRCode success!");
});
}
以上是生成二维码,有什么问题请在下方留言