@latticelabs/qrcode

A Vue.js component to generate QRCode.

中文

install

the @latticelabs/qrcode component can use in you Vue.js app.

npm install --save @latticelabs/qrcode # yarn add qrcode.vue

dist/
|--- qrcode.cjs.js         // CommonJS
|--- qrcode.esm.js         // ES module
|--- qrcode.browser.js     // UMD for browser or require.js or CommonJS
|--- qrcode.browser.min.js // UMD Minimum size

Usage

e.g.

import { createApp } from 'vue'
import QrcodeVue from '@latticelabs/qrcode'

const bindingParams = new BindingQrCodeParamsBuilder()
      .setData({
        姓名: "张三",
        学号: "2019212",
      })
      .setCallbackUrl("https://did.com/callback")
      .setHash("0x120981291821")
      .build();

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

Or single-file components with a *.vue extension:

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

  const bindingParams = new BindingQrCodeParamsBuilder()
      .setData({
        姓名: "张三",
        学号: "2019212",
      })
      .setCallbackUrl("https://did.com/callback")
      .setHash("0x120981291821")
      .build();

  export default {
    data() {
      return {
        value: bindingParams.encode(),
        size: 300,
      }
    },
    components: {
      QrcodeVue,
    },
  }
</script>

Component props

value

• Type: string
• Default: ''

The value content of qrcode.

size

• Type: number
• Default: 100

The size of qrcode element.

render-as

• Type: string('canvas' | 'svg')
• Default: canvas

Generate QRcode as canvas or svg. The prop svg can work on SSR.

margin

• Type: number
• Default: 0

Define how much wide the quiet zone should be.

level

• Type: string('L' | 'M' | 'Q' | 'H')
• Default: H

qrcode Error correction level (one of 'L', 'M', 'Q', 'H'). Know more, wikipedia: QR_code.

background

• Type: string
• Default: #ffffff

The background color of qrcode.

foreground

• Type: string
• Default: #000000

The foreground color of qrcode.

class

• Type: string
• Default: ''

The class name of qrcode element.