v-qrcode
Version:
a qrcode component for vue
65 lines (46 loc) • 1.69 kB
Markdown
# v-qrcode
A QRCode Component For Vue 2
## demo
[demo](https://atwxp.github.io/v-qrcode/dist)
## 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`