vue H5当前页面生成二维码

vue H5当前页面生成二维码

1.使用 npm install --save qrcode 下载依赖包

2.在你需要生成二维码的页面中导入 import QRCode from "qrcode"

3.存放二维码的<img id="secondPicture" :src="obj.secondPicture" alt />标签

4.JS代码

<script>
import QRCode from "qrcode";
export default {// 组件名称name: "demo",data() {return {obj: {userName: "车萍萍",station: "二手商用车鉴定评估师",stationLevel: "中级",certificateNo: "20150101235959999001",firstPicture: "",secondPicture: "",ateIssueTime: "2015-01-01",},url: "192.168.3.91:8080/defaultEva",};},mounted() {DataURL(this.url, {//这个this.url就是你扫码后要跳转的地址version: 7, //版本号errorCorrectionLevel: "Q", //容错率,(建议选较低)更高的级别可以识别更模糊的二维码，但会降低二维码的容量width: 280, //设置二维码图片大小height: 280,}).then((url) => {console.log(url); //这个url是二维码生成地址，也就是相当于图片地址this.obj.secondPicture = url; //赋值给变量。用在img的src属性上}).catch((err) => {(err);});},
};
</script> 

5.生成效果