UNPKG

v-qrcode

Version:

a qrcode component for vue

65 lines (46 loc) 1.69 kB
# 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`