【Vue】Vue生成二维码 Vue把url地址生成二维码手机打开 扫一扫手机端打开实战案例 vue生成二维码

代码

npm install qrcodejs2 --save

代码引入到项目中，不需要再main.js做处理，只需要在使用的vue页面中引入。

在页面中使用

<template>
	<div id="qrcode" ref="qrcode"></div>
</template>

<script>
// 需要在页面中引入
import QRCode from 'qrcodejs2'
export default{
	components:{
		QRCode
	},
	data(){
		return{
			
		}
	}
	... 
}
</script>

生成二维码

mounted() {
   	 this.qrcodeScan();    // 注：需在mounted里触发qrcodeScan函数
   }
methods:{
	qrcodeScan() { //生成二维码
		let qrcode = new QRCode(document.getElementById("qrcode"), {
		width: 150, // 二维码宽度 
		height: 150, // 二维码高度
		text: window.location.href, // 浏览器地址url
		colorDark: "#000000",
		colorLight: "#ffffff",
		correctLevel: QRCode.CorrectLevel.H,
		})
		// console.log(window.location.href);
	},
},

text为二维码扫码打开之后的链接
这里把url地址转化为二维码。实现pc端页面，扫码打开手机端。

---

如图

我本来还想用获取路由,然后路由拼接上前缀,
发现这样不灵活,只能路径写死 万一改域名之类的 就会出问题
然后发现了

window.location.href // 浏览器地址url

直接用这个,反正手机端和pc端地址是一样的