vue中生成二维码

方法一

npm install --save qrcodejs2

在vue文件中

<template>
	<div>
		<div class="code" ref="qrCodeUrl"></div>
		<div class="code2" ref="code2"></div>
	</div>
</template>

<script>
	import QRCode from 'qrcodejs2'
	export default{
		methods:{
			creatQrcode(){
				var qrcode = new QRCode(this.$refs.qrCodeUrl,{
					text:'这是一个二维码',//链接地址
					width: 200,
					height: 200,
					colorDark:'#000',
					colorLight:"#fff",
					correctLevel:QRCode.CorrectLevel.H
				})
			},
			creatQrcode1(){
				var qrcode = new QRCode(this.$refs.code2,{
					text:'这是第二个二维码',//链接地址
					width: 200,
					height: 200,
					colorDark:'#000',
					colorLight:"#fff",
					// correctLevel:QRCode.CorrectLevel.H
				})
			}
		},
		mounted(){
			this.creatQrcode()
			this.creatQrcode1()
		}
	}
</script>

<style>
	div{
		margin: 20px;
	}
	
</style>

方法二

npm install vue-qr --save

在vue文件中

<template>
	<div>
		<vue-qrcode :logoSrc='imageUrl' text="三行情书" :size="200"></vue-qrcode>
	</div>
</template>

<script>
	import vueQr from 'vue-qr'
	export default{
		data(){
			return {
				imageUrl:require('../../public/img/1.jpg')
			}
		},
		components:{
			"vue-qrcode":vueQr
		}
	}
</script>

<style>
</style>