vue前端生成二维码，实现扫码下载功能

vue前端生成二维码，实现扫码下载功能

首先需要安装一个插件

npm install --save qrcodejs2

然后在需要的页面引入插件，最后使用

<template>
	<div>
	    <div class="qrcode" ref="qrCodeUrl"></div>
	</div>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
  mounted() {
    this.creatQrCode();
  },
  methods: {
    // 生成二维码
    creatQrCode() {
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: "xxxx", // 需要转换为二维码的内容
        width: 100,
        height: 100,
        colorDark: "#000000",//二维码颜色
        colorLight: "#ffffff",//二维码的背景色
        correctLevel: QRCode.CorrectLevel.H//容错率，L/M/H
      });
    },
  }
}
</script>
<style lang='less' scoped>
//为了使生成的二维码更好看，可以为生成的二维码添加一些样式
.qrcode{
    display: inline-block;
    img {
        width: 132px;
        height: 132px;
        background-color: #fff; //设置白色背景色
        padding: 6px; // 利用padding的特性，挤出白边
        box-sizing: border-box;
    }
}
</style>