如何在vue项目中生成二维码(qrcode.js)并下载(中间不带logo)

Making_Bug

于 2019-11-19 11:49:18 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue qrcodejs

本文链接：https://blog.youkuaiyun.com/Making_Bug/article/details/103138494

本文介绍了在Vue项目中使用qrcodejs2生成二维码的步骤，包括安装库、引入模块以及实现二维码的显示和下载功能。在对话框中点击按钮，可以弹出带有二维码的对话框，用户可以进行下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装qrcode包

1.npm install qrcodejs2 --save
2. 在你需要用到二维码的页面引入 import QRCode from ‘qrcodejs2’

二维码代码

我的操作逻辑是将二维码放在一个dialog里，点击打开二维码的按钮，弹出对话框显示二维码，以下是代码：

<el-button type="primary" icon="el-icon-s-grid" @click="show_qrcode(scope.row.name)" :disabled="scope.row.staticQrcodeAuth == 'disable'"></el-button>
<!--这里的disable是项目要求,如果开了显示二维码开关就显示，否则就不显示，可以用v-show 或 v-if实现，看项目具体要求。@click里的scope.row.name是为了下面 拼接 二维码的url用的-->

Alt

<!--dialog存放二维码-->
<el-dialog
  width="30%"
  :before-close="handleClose"

最低0.47元/天解锁文章