点击查看大佬写的示例
点击查看官网
我的需求是:从本地获取一个变量,根据变量生成链接,然后根据链接生成二维码
做法如下
1.先安装依赖
二维码的
npm install --save qrcode
剪切板的
npm install clipboard --save
2.在组件中使用–以下都是在组件中引入
引入qrcode–
import QRCode from 'qrcode'
引入clipboard
import Clipboard from "clipboard";
template
<!-- 复制链接 -->
<div class='copy'>
<input type="text" v-model="copyContent" id="copy_text" class="copyValue">
<button class="tagRead" data-clipboard-action="copy" data-clipboard-target="#copy_text" @click="copy" >复制链接</button>
</div>
<!-- 生成二维码 -->
<div class="qr">
<p>扫码下载APP</p>
<div id='code'></div>
<canvas id="canvas" ref ="canva" class="QRcode"></canvas>
</div>
script
export default {
data() {
return {
copyContent: "http://112.uve97a.cn/?icode=123" //链接
};
},
created() {
let icode = sessionStorage.getItem("userid"); //获取id
this.copyContent = "http://112.uve97a.cn/?icode=" + icode; //重置链接----链接现在就是动态的
},
mounted() {
this.useqrcode();
},
methods: {
// 复制内容
copy() {
var clipboard = new Clipboard(".tagRead");
clipboard.on("success", e => {
console.log("复制成功");
// 释放内存
clipboard.destroy();
});
clipboard.on("error", e => {
// 不支持复制
console.log("该浏览器不支持自动复制");
// 释放内存
clipboard.destroy();
});
},
// 生成二维码
useqrcode() {
let canvas = this.$refs.canva;
QRCode.toCanvas(canvas, this.copyContent, function(
error
) {
if (error) console.error(error);
console.log("success!");
});
}
}
};
style
<style scoped>
p {
margin: 0;
}
.copy {
width: 100%;
position: absolute;
bottom: 30px;
text-align: center;
}
.copyValue {
display: inline-block;
width: 240px;
height: 24px;
line-height: 20px;
border-radius: 30px;
background-color: rgba(255, 255, 255, 1);
text-align: center;
box-shadow: 0px 0px 0px 0px rgba(131, 33, 172, 1);
border: 2px solid rgba(255, 185, 36, 1);
color: rgba(0, 0, 0, 1);
font-size: 12px;
text-align: center;
font-family: SourceHanSansSC-regular;
padding: 4px;
}
.tagRead {
width: 70px;
height: 26px;
border-radius: 24px;
border: 0.1px solid transparent;
padding: 0;
background: -webkit-linear-gradient(top, #ffe4a3, #ffba28);
background: -o-linear-gradient(bottom, #ffe4a3, #ffba28);
background: -moz-linear-gradient(bottom, #ffe4a3, #ffba28);
background: linear-gradient(to bottom, #ffe4a3, #ffba28);
color: #5e2d05;
font-size: 12px;
font-weight: bolder;
}
/* 二维码 */
.qr {
width: 100%;
position: absolute;
bottom: 18vh;
left: 50vw;
transform: translateX(-50%);
text-align: center;
}
.qr p {
color: #fff;
font-size: 18px;
}
.QRcode {
margin-top: 10px;
padding: 2px;
}
</style>