页面点击登录地址后,弹出框,四个地址,和对应的二维码展示并下载,使用element + vue实现

参考:
1.解决vue项目使用element的Dialog组件生成二维码的系列问题
技术点:
1.生成二维码:使用QRCode
2.地址复制按钮, <el-button>
3.二维码下载 canvas
实现代码:
1.复制
<el-button type="primary" v-clipboard:copy="loginUrl" v-clipboard:success="onCopySuccess" v-clipboard:error="onCopyError" >复制</el-button> </div>
loginUrl: 'http://www.baidu.com',
onCopySuccess() { this.$message.success("复制成功"); }, onCopyError() { this.$message.error("复制失败"); },
效果:
2.二维码
1,终端输入 npm install qrcodejs2 --save 安装qrcodejs2 npm install qrcodejs2 --save
import QRCode from 'qrcodejs2'
<div class="qrcode" id="qrcode"></div>
// 生成二维码 GetQRcode(){ var qrcode = new QRCode('qrcode', { text: this.loginUrl, // 需要生成二维码的内容 width: 256, height: 256, colorDark : '#000000', colorLight : '#ffffff', correctLevel : QRCode.CorrectLevel.H }); },
效果:
3.二维码下载
效果

代码:
<!-- 登录链接 --> <el-dialog :title="linkTitle" :visible.sync = "openLink" width="600px" append-to-body> <div class="qrcode" id="qrcode" style="text-align: center;margin: 0 auto;"></div> <div slot="footer" style="text-align: center"> <el-button type="primary" plain @click="downLoad">下载</el-button> </div> <div slot="footer" class="dialog-footer"> <el-button @click="cancelLink">取 消</el-button> </div> </el-dialog>
downLoad(){ alert("1111"); var canvas = document.getElementById('qrcode').getElementsByTagName('canvas'); this.downLoadImage(canvas); }, downLoadImage(canvas){ var a = document.createElement("a"); a.href = canvas[0].toDataURL('image/png'); a.download = "二维码"; a.click(); a = null; },
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升