将文本生成二维码

最新推荐文章于 2024-04-29 13:50:19 发布

myazwj

最新推荐文章于 2024-04-29 13:50:19 发布

阅读量1.1k

点赞数 1

文章标签： git 前端 http

本文链接：https://blog.csdn.net/myazwj/article/details/121521706

版权

本文介绍了如何在前端应用中生成二维码。首先通过yarn安装qrcode库，然后在代码中导入并使用Qrcode.toCanvas方法，将文本内容绘制到canvas元素上。示例展示了在点击头像时生成二维码的过程，利用$nextTick确保canvas渲染完成后再进行生成。此外，提到了权限管理的三个方面：API接口、页面权限和按钮权限。

摘要由CSDN通过智能技术生成

使用：

安装 yarn add qrcode

导入 import Qrcode from 'qrcode'

定义一个canvas标签放二维码

<canvas ref="canvas" />

生成

Qrcode.toCanvas(需要放置二维码的canvas标签,文本内容,{配制,宽度，高度....})

如下所示

<el-dialog title="二维码" :visible.sync="showQrcode">
<div style="text-align: center">
<canvas ref="canvas" />
</div>
</el-dialog>

// 默认弹出框关闭
showQrcode: false,

// 点击头像的时候生成二维码
imgClick(imgSrc) {
console.log(imgSrc, '头像地址')
if (!imgSrc) return
// 打开弹出框
this.showQrcode = true
// 这个时候要使用this.$nexttick等canvas渲染完成后生成二维码