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>

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐