vue 使用 qrcodejs2 生成二维码
安装 npm install qrcodejs2 --save
<template>
<body>
<div id="qqq">
<div id="qrCode" ref="qrCodeDiv"></div>
</div>
</body>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
name: "qrCode",
data() {
return {
src2: "https://s1.ax1x.com/2022/05/07/OMGDGd.png",
};
},
mounted: function () {
this.$nextTick(function () {
this.bindQRCode();
});
},
methods: {
bindQRCode: function () {
new QRCode(this.$refs.qrCodeDiv, {
text: "http:www.baidu.com",
width: 200,
height: 200,
colorDark: "#333333",
colorLight: "#ffffff",
render: "canvas",
sec: "https://z3.ax1x.com/2021/04/08/cJz0G4.jpg",
correctLevel: QRCode.CorrectLevel.L,
});
},
},
};
</script>
<style lang='less'>
#qqq {
background-color: #111;
width: 300px;
height: 300px;
margin: 0 auto;
position: relative;
}
#qrCode {
display: inline-block;
margin: 14px auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-100px, -100px);
img {
width: 200px;
height: 200px;
background-color: #fff;
padding: 6px;
}
}
</style>