vue生成二维码

插件地址：qrcodejs2 - npm

1.安装 npm i qrcodejs2 --save

2.引入 import QRCode from 'qrcodejs2'

容错级别：是指QR码被遮挡或残破时依然能被识别的几率，容错级别越高抗残破或遮挡的能力就越强，提高容错级别会导致二维码的点阵密度增大，从而降低识别速度。

QR码还有四种容错级别可以选择： L（Low）：7%的字码可被修正 ；M（Medium）：15%的字码可被修正 ；Q（Quartile）：25%的字码可被修正； H（High）：30%的字码可被修正。

容错级别：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H 

完整代码：

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

<script>
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {}
  },
  mounted() {
    this.creatQrCode()
  },
  methods: {
    creatQrCode() {
      var qrcode = new QRCode(this.$refs.qrcode, {
        text: 'https://www.baidu.com', // 需要转换为二维码的内容
        width: 80, // 生成二维码得宽度
        height: 80, // 生成二维码得高度
        colorDark: '#000', // 二维码实点的颜色
        colorLight: '#fff', // 二维码背景色
        correctLevel: QRCode.CorrectLevel.H // （1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>

二维码中间添加logo

vue-qr - npm插件地址：vue-qr - npm

1.安装npm install vue-qr --save

2.引入 import vueQr from 'vue-qr'

相关属性：

text：编码的内容；

size： 二维码尺寸, 长宽一致, 包含外边距；

margin：二维码图像的外边距, 默认 20px；

colorDark：实点的颜色；

colorLight：空白区的颜色；

backgroundColor：Background color 背景色；

logoSrc：嵌入至二维码中心的 logo 地址；

logoScale：logo 大小的值, 过大将导致解码失败, logo 尺寸计算公式 logoScale*(size-2*margin), 默认 0.2；

logoMargin： logo 标识周围的空白边框, 默认为0。

完整代码：

<template>
  <div>
    <vue-qr
      :logoSrc="logoSrc"
      :text="text"
      :size="200"
      backgroundColor="#d9d9d9"
      colorDark="skyblue"
    ></vue-qr>
  </div>
</template>

<script>
import vueQr from 'vue-qr'
export default {
  components: {
    vueQr
  },
  data() {
    return {
      logoSrc: require('../../assets/img/xiaoxin.png'),
      text: 'https://www.baidu.com'
    }
  },
  methods: {}
}
</script>
<style lang="less" scoped>
</style>