v-qrcode

A QRCode Component For Vue 2

demo

demo

Install

$ npm i v-qrcode --save

Usage

ES6

<template>
    <div>
        <qrcode :cls="qrCls" :value="qrText"></qrcode>
    </div>
</template>

<script>
import Qrcode from 'v-qrcode'

export default {
    data () {
        return {
            qrCls: 'qrcode',

            qrText: 'hello world'
        }
    },

    components: {
        Qrcode
    }
}
</script>

Browser Globals

The dist folder contains v-qrcode.js and v-qrcode.min.js with all components exported in the window.VQrcode object.

<script src="path/to/vue.js"></script>
<script src="path/to/v-qrcode.min.js"></script>
<script>
    var qrcode = VQrcode.qrcode;
</script>

Options

prop | type | default value | desc ----------| -------------------- | ------------- | ----- value | string | "" | the string to generate QR Code cls | string | "" | the classname of wrapper size | number | 100 | size of qrcode level | string | "L" | level of qrcode (L, Q, M, H) background | string | "#fff" | background color foreground | string | "#000" | foreground color mime | string | "image/png" | the mime type of image padding | number | 0 | the padding between qrcode and wrapper type | string | "canvas" | the output type can be either canvas or image