![cover](https://img-blog.csdnimg.cn/img_convert/f968eadd6e7342738a813835f46a985e.png)
生成二维码---uniapp使用QRCodejs实现根据动态内容生成二维码
【代码】生成二维码---uniapp使用QRCodejs实现根据动态内容生成二维码。
·
1.npm下载
npm install qrcodejs2 --save
2.
<view class="center">
<div class="qrcode" ref="qrCodeUrl"></div>
</view>
<script>
import QRCode from "qrcodejs2"
export default {
components: {
QRCode
},
data() {
return {
qrcode:12346
}
},
methods: {
creatQrCode() {
var qrcode = document.getElementsByClassName('qrcode')[0].innerHTML
console.log(qrcode)
var qrcode = new QRCode(this.$refs.qrCodeUrl, {
text: this.qrcode, //需要转换为二维码的内容
width: 200, //二维码宽度
height: 200, //二维码高度
colorDark: '#000000', //前景色
colorLight: '#ffffff', //后景色
correctLevel: QRCode.CorrectLevel.L //容错级别
})
}
},
// 遇到需要操作dom元素的方法,必须要放在mounted中,放在onLoad中会报错
mounted() {
this.creatQrCode()
}
}
</script>
3.
<style>
/* 想要在页面水平垂直居中需要给父盒子设置宽高 */
.center {
width: 100%;
height: 1250rpx;
flex: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
更多推荐
所有评论(0)