vue3中使用qrcodejs2-fix插件生成二维码
在vue3中使用qrcodejs2-fix生成二维码。在项目开发中,页面二维码展示不一定是直接使用后端返回的图片连接,可能需要前端生成二维码。二.在相关vue文件中导入三.HTML代码四.JavaScript代码五.QRCode说明六.在弹窗dialog中展示。在实际开发中,展示二维码可能是打开一个弹窗而后展示,这个时候照搬上面代码是不行的,因为获取不到对应的dom,所以这里需要使用nextTic
·
场景
在项目开发中,页面二维码展示不一定是直接使用后端返回的图片连接,可能需要前端生成二维码。本文是在vue3中使用qrcodejs2-fix。
一.安装qrcodejs2-fix
npm install qrcodejs2-fix
二.在相关vue文件中导入
import QRCode from 'qrcodejs2-fix';//在需要使用的vue文件中导入即可
三.HTML代码
<!-- 二维码输出容器 -->
<div id="qrCodeBox"></div>
<!-- 按钮点击事件 -->
<button @click="getQrCode()">获取二维码</button>
四.JavaScript代码
const getQrCode = () => {
//清空该元素内内容
document.getElementById("qrCodeBox").innerHTML = "";
new QRCode(document.getElementById("qrCodeBox"), {
//需要编码的文字内容或者URL
text: 'https://Ghmin',
width: 100, //二维码宽
height: 100,//二维码高
});
};
五.QRCode说明
new QRCode(element, parameter);
//element 第一个参数为二维码容器,即页面元素
//parameter 生成二维码图片的参数
六.在弹窗dialog中展示。
在实际开发中,展示二维码可能是打开一个弹窗而后展示,这个时候照搬上面代码是不行的,因为获取不到对应的dom,所以这里需要使用nextTick()函数。
//传入需要转码的url
const getQrCode = (url) => {
//打开弹窗dialog
qrOpen.value = true
//使用nextTick()等到DOM更新之后再执行代码
nextTick(() => {
document.getElementById("qrCodeBox").innerHTML = "";
new QRCode(document.getElementById("qrCodeBox"), {
text: url
});
})
};
更多推荐
已为社区贡献4条内容
所有评论(0)