此文章参考其他文章内容,只为自己记录
安装 qrcodejs2
npm install qrcodejs2 --save
页面引入
HTML中添加
//html元素
<button @click="showQRcode">点击分享二维码</button>
<div id="qrcode" ref="qrcode"></div>
import QRCode from 'qrcodejs2'
methods中添加方法
/**
* @description 生成二维码
* @param {number} qWidth 宽度
* @param {number} qHeight 高度
* @param {string} qText 二维码内容(跳转连接)
* @param {string} qRender 渲染方式(有两种方式 table和canvas,默认是canvas)
*/
qrcode(qWidth, qHeight, qText, qRender) {
let qrcode = new QRCode("qrcode", {
width: qWidth,
height: qHeight,
text: qText,
render: qRender
});
},
/**
* @description 点击显示二维码
*/
showQRcode() {
//二维码初始化 点击一次添加一个二维码
// 此行代码是为了解决以上问题 或者 刷新二维码的时候生成多个二维码的问题
this.$refs.qrcode.innerHTML = "";
this.$nextTick(function() {
this.qrcode(256, 256, this.link, "canvas");
});
}
全部代码(仅供参考)
<template>
<div>
<button @click="showQRcode">点击分享二维码</button>
<div id="qrcode" ref="qrcode"></div>
</div>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
name: "HelloWorld",
data() {
return {
link: "https://www.baidu.com/",
};
},
methods: {
qrcode(qWidth, qHeight, qText, qRender) {
new QRCode("qrcode", {
width: qWidth,
height: qHeight,
text: qText,
render: qRender,
});
},
showQRcode() {
//二维码初始化 点击一次添加一个二维码
// 此行代码是为了解决以上问题 或者 刷新二维码的时候生成多个二维码的问题
if (this.$refs.qrcode) this.$refs.qrcode.innerHTML = "";
this.$nextTick(function () {
this.qrcode(300, 300, this.link, "canvas");
console.log(QRCode.CorrectLevel.L);
});
},
},
};
</script>
<style scoped lang="less">
</style>