利用qrcode.vue库生成二维码

利用qrcode.vue库生成二维码

安装

在vue2中

npm install --save qrcode.vue@1 # yarn add qrcode.vue

在vue3中

npm install --save qrcode.vue@3 # yarn add qrcode.vue

使用

普通使用：

import { createApp } from 'vue'
import QrcodeVue from 'qrcode.vue'

createApp({
  data: {
    value: 'https://example.com',
  },
  template: '<qrcode-vue :value="value"></qrcode-vue>',
  components: {
    QrcodeVue,
  },
}).mount('#root')

在组件中使用：

<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
• 默认值：''

传递给二维码根元素的类名。