Vue生成二维码_vue通过二维码分享
大家好，又见面了，我是你们的朋友全栈君。
转存 vue 生成二维码并下载
1、下载插件
npm install --save qrcodejs22、引入
const QRCode = require("qrcodejs2")3、组件使用
<template>
<div class="qr_code">
<div style="display: flex;align-items: center">
地址：<Input id="text" type="text" v-model="urlx" style="width:400px"/><br/>
<Button style="margin: 0 10px;" type="primary" @click="getMadeQrCode">生成</Button>
二维码名称：<Input type="text" v-model="qrCodeName" style="width:200px;"/><br/>
<Button style="margin-left: 10px" type="primary" @click="downloadQrCode">下载</Button>
</div>
<div id="qrcode" ref="qrcodeU" style="width:200px; height:200px; margin-top:15px;"></div>
</div>
</template>4、生成二维码
//二维码生成
async getMadeQrCode() {
document.getElementById('qrcode').innerHTML = ''; //生成前先清除上一个
let qrcode = new QRCode(this.$refs.qrcodeU, {
text: this.urlx,//二维码包含的信息
width: 200,
height: 200,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
});
}版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/188118.html原文链接：https://javaforall.cn
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022年9月28日 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录