vrcode v1.2.7-readme

A Vue component to generate QR Code and download.

Table of contents

• Getting started
• Props
• Milestone
• Versioning
• License

Getting started

Install

npm i @ispa.io/vrcode

Usage

import Vue from 'vue';

Vue.component('vrcode', require('vrcode').default);

Example

<vrcode
    :download="{
        text: 'Download',
        filename: 'file-name.png',
        visible: true, type: 'image/png'
    }"
    value="A Vue component to generate QR Code and download."
    :options="{
        size: 200,
        level: 'Q'
    }"
></vrcode>

Props

value

• Type: String
• Default: undefined

The value of the QR code.

download

Passing download props, to show download button, it support:

• Type: Object

• text - button inner text

• visible - setting download button visible or not
• style - setting download button style
• class - setting download button class name
• type - image type, such as image/png; use mime type for exactly force download
• filename - file name to download

You can only download the qrcode to image by using type: canvas

type

• Type: String
• Default: 'canvas'

You can use canvas or svg. But SVG not support to download now.

options

• Type: Object

• Values:

  • level

    • Type: String
    • Default: 'L'

    Possible levels are shown below: | Level | Error resistance | |------------------|:----------------:| | L (Low) | ~7% | | M (Medium) | ~15% | | Q (Quartile) | ~25% | | H (High) | ~30% |

  • padding

    • Type: Number
    • Default: 10

    This is padding border of image (Because users is difficult to scan with dark mode/dark background, so we need an white padding/border)

• background

  • Type: String
  • Default: '#fff'

• foreground

  • Type: String
  • Default: '#000'

• className

  • Type: String
  • Default: ''

Milestone

• Transparent background
• PNG transparent background download
• With centered logo

Versioning

Maintained under the Semantic Versioning guidelines.

License

MIT © Malayvuong

⬆ back to top