直接引入qrcodejs2
npm install qrcodejs2 --save
代码如下
引入QRCode包
import QRCode from 'qrcodejs2';
<script>
export default {
name: "qrCode",
data() {
return {}
},
mounted: function () {
this.$nextTick(function () {
this.bindQRCode();
})
},
methods: {
bindQRCode: function () {
new QRCode(this.$refs.qrCodeDiv, {
text: 'Vue实现生成二维码!',
(text里面可以写要跳转的链接;例如:text:"https://www.baidu.com")
width: 200,
height: 200,
colorDark: "#333333", //二维码颜色
colorLight: "#ffffff", //二维码背景色
correctLevel: QRCode.CorrectLevel.L//容错率,L/M/H
})
}
}
}
</script>
样式如下
<style lang='less'>
#qqq {
background-color: #111;
width:300px;
height:300px;
margin: 0 auto; /*水平居中*/
position: relative;
}
#qrCode {
display: inline-block;
margin: 0 auto; /*水平居中*/
position: relative;
top: 15%;
img {
width: 200px;
height: 200px;
background-color: #fff; //设置白色背景色
padding: 6px; // 利用padding的特性,挤出白边
}
}
</style>
————————————————
版权声明:本文为CSDN博主「ღ冷风20°C᭄ꦿ࿐」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_50241387/article/details/123549095