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
默认值：''
传递给二维码根元素的类名