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 文档

参数	说明
text	二维码内容 （必需）
size	尺寸, 长宽一致, 包含外边距 （必需）
margin	二维码图像的外边距, 默认 20px （可选）
dotScale	数据区域点缩小比例, 默认为0.35 （可选）
correctLevel	容错级别 0 - 3 （可选）
whiteMargin	若设为 true, 背景图外将绘制白色边框（默认是true） （可选）
bindElement	指定是否需要自动将生成的二维码绑定到HTML上（默认是true） （可选）
callback	生成的二维码 Data URI 可以在回调中取得, 第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的, 所以加个 id 用于排序)
颜色 –
colorDark	实点的颜色 （可选）
colorLight	空白区的颜色 （可选）
autoColor	若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark, 默认 true // 若设置了 autoColor，则 colorDark 和 colorLight 都将被忽略。 （可选）
背景图像 –
bgSrc	欲嵌入的背景图地址 （可选）
gifBgSrc	欲嵌入的背景图 gif 地址, 设置后普通的背景图将失效。设置此选项会影响性能 （可选）
backgroundColor	背景色 （可选）
backgroundDimming	叠加在背景图上的颜色, 在解码有难度的时有一定帮助 （可选）
logo图像 –
logoSrc	嵌入至二维码中心的 LOGO 地址 （可选 ）
logoScale	用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式，logoScale(size - 2margin), 默认 0.2 （可选 ）
logoMargin	标识周围的空白边框, 默认为0 （可选 ）
logoBackgroundColor	背景色, 需要设置 logo margin （可选 ）
logoCornerRadius	标识及其边框的圆角半径, 默认为0 （可选）
后处理
binarize	若为 true, 图像将被二值化处理, 未指定阈值则使用默认值，默认是false （可选）
binarizeThreshold	(0 < threshold < 255) 二值化处理的阈值 （可选）