Vue示例

npm install qrcodejs2 --save

import QRCode from 'qrcodejs2'

<div id="qrCode" ref="qrCodeDiv"></div>

qrCode(){
  let _this = this
  new QRCode(this.$refs.qrCodeDiv, {
    text: 'https://web.aroundme.tv/oneseeTest/pclogin.html?authKey='+_this.uuid+'&devType=admin',
    width: 200,
    height: 200,
    colorDark: "#333333", //二维码颜色
    colorLight: "#ffffff", //二维码背景色
    correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
  })
},

该方法只适用Vue2

Vue3解决方案

qrcode.vue

npm i qrcode.vue

在组件中单独使用

<template>
  <qrcode-vue :value="value" :size="size" level="H" />
</template>
<script>
  import QrcodeVue from 'qrcode.vue'

  export default {
    data() {
      return {
        value: 'https://example.com',
        size: 300,
      }
    },
    components: {
      QrcodeVue,
    },
  }
</script>

相关配置

value
类型：string
默认值：''
二维码的内容值

size
类型：number
默认值：100
二维码大小

render-as
类型：string('canvas' | 'svg')
默认值：canvas
生成二维码的 HTML 标签，可选 canvas 或 svg。其中 svg 可以用于 SSR

margin
类型：number
默认值：0
定义空白区的宽度应该是多少

level
类型：string('L' | 'M' | 'Q' | 'H')
默认值：H
二维码的容错能力等级，取值为 'L', 'M', 'Q', 'H' 之一。了解更多，维基百科：QR_code

background
类型：string
默认值：#ffffff
二维码背景颜色

foreground
类型：string
默认值：#000000
二维码前景颜色

class
类型：string
默认值：''
传递给二维码根元素的类名