vue有两种生成二维码的方式，qrcode、vue-qr（有icon）；

vue有两种生成二维码的方式，qrcode、vue-qr（有icon）；

1. 使用qrcode生成二维码

1.1 安装

	npm install --save qrcodejs2

1.2 引入

	//所需页面导入
	import QRCode from 'qrcodejs2'

1.3 使用

<div class="qrcode" ref="qrCodeUrl"></div>
<script>
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
  },
  methods: {
    creatQrCode() {
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: 'https://blog.csdn.net/weixin_42601136', // 需要转换为二维码的内容
            width: 100,
            height: 100,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
    },
},
mounted() {
    this.creatQrCode();
},
};
</script>

2. 使用vue-qr生成二维码（有icon）

2.1 安装

如果失败了一般是因为这个包依赖canvas，canvas托管在github，国内访问容易超时，解决办法:
https://blog.csdn.net/EverRose/article/details/122846767

	npm install vue-qr --save

2.2 引入

	vue2.x  import vueQr from 'vue-qr'
	vue3.x  import vueQr from 'vue-qr/src/packages/vue-qr.vue'

2.3 使用

<template>
  <div>
    <div class="qrcode" ref="qrCodeUrl"></div>
    <vue-qr :logoSrc="imageUrl" text="https://blog.csdn.net/weixin_42601136" :size="200"></vue-qr>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import vueQr from "vue-qr";
export default {
  data() {
    return {
      imageUrl: require("./sw.jpg"),
    };
  },
  components: {
    vueQr,
  },
  methods: {
    creatQrCode() {
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: "https://blog.csdn.net/weixin_42601136", // 需要转换为二维码的内容
        width: 100,
        height: 100,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
  },
  mounted() {
    this.creatQrCode();
  },
};
</script>


<style scoped>
.qrcode {
  display: inline-block;
  width: 132px;
  height: 132px;
  background-color: #fff;
  padding: 6px;
  box-sizing: border-box;
}
</style>

2.4 文档