101 lines
2.5 KiB
Markdown
101 lines
2.5 KiB
Markdown
|
# vue-qrcode
|
||
|
|
|
||
|
|
[](https://travis-ci.org/fengyuanchen/vue-qrcode) [](https://codecov.io/gh/fengyuanchen/vue-qrcode) [](https://www.npmjs.com/package/@chenfengyuan/vue-qrcode) [](https://www.npmjs.com/package/@chenfengyuan/vue-qrcode) [](https://www.npmjs.com/package/@chenfengyuan/vue-qrcode)
|
||
|
|
|
||
|
|
> QR code component for [Vue.js](https://vuejs.org/), bases on [node-qrcode](https://github.com/soldair/node-qrcode).
|
||
|
|
|
||
|
|
- [Website](https://fengyuanchen.github.io/vue-qrcode)
|
||
|
|
|
||
|
|
## Table of contents
|
||
|
|
|
||
|
|
- [Main](#main)
|
||
|
|
- [Getting started](#getting-started)
|
||
|
|
- [Props](#props)
|
||
|
|
- [Browser support](#browser-support)
|
||
|
|
- [Versioning](#versioning)
|
||
|
|
- [License](#license)
|
||
|
|
|
||
|
|
## Main
|
||
|
|
|
||
|
|
```text
|
||
|
|
dist/
|
||
|
|
├── vue-qrcode.js (UMD)
|
||
|
|
├── vue-qrcode.min.js (UMD, compressed)
|
||
|
|
├── vue-qrcode.common.js (CommonJS)
|
||
|
|
└── vue-qrcode.esm.js (ES Module)
|
||
|
|
```
|
||
|
|
|
||
|
|
## Getting started
|
||
|
|
|
||
|
|
### Install
|
||
|
|
|
||
|
|
```shell
|
||
|
|
npm install @chenfengyuan/vue-qrcode vue
|
||
|
|
```
|
||
|
|
|
||
|
|
In browser:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<script src="/path/to/vue.js"></script>
|
||
|
|
<script src="/path/to/vue-qrcode.js"></script>
|
||
|
|
<script>Vue.component(VueQrcode.name, VueQrcode);</script>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Usage
|
||
|
|
|
||
|
|
```js
|
||
|
|
import Vue from 'vue';
|
||
|
|
import VueQrcode from '@chenfengyuan/vue-qrcode';
|
||
|
|
|
||
|
|
Vue.component(VueQrcode.name, VueQrcode);
|
||
|
|
```
|
||
|
|
|
||
|
|
```html
|
||
|
|
<qrcode value="Hello, World!" :options="{ width: 200 }"></qrcode>
|
||
|
|
```
|
||
|
|
|
||
|
|
[⬆ back to top](#table-of-contents)
|
||
|
|
|
||
|
|
## Props
|
||
|
|
|
||
|
|
### value
|
||
|
|
|
||
|
|
- Type: `String`
|
||
|
|
- Default: `undefined`
|
||
|
|
|
||
|
|
The value of the QR code.
|
||
|
|
|
||
|
|
### options
|
||
|
|
|
||
|
|
- Type: `Object`
|
||
|
|
- Default: `undefined`
|
||
|
|
|
||
|
|
The options for the QR code generator. References the [node-qrcode's options](https://github.com/soldair/node-qrcode#qr-code-options).
|
||
|
|
|
||
|
|
### tag
|
||
|
|
|
||
|
|
- Type: `String`
|
||
|
|
- Default: `'canvas'`
|
||
|
|
- Options: `'canvas'`, `'img'` and other element tags.
|
||
|
|
|
||
|
|
The tag name of the component's root element.
|
||
|
|
|
||
|
|
## Browser support
|
||
|
|
|
||
|
|
- Chrome (latest)
|
||
|
|
- Firefox (latest)
|
||
|
|
- Safari (latest)
|
||
|
|
- Opera (latest)
|
||
|
|
- Edge (latest)
|
||
|
|
- Internet Explorer 9+
|
||
|
|
|
||
|
|
## Versioning
|
||
|
|
|
||
|
|
Maintained under the [Semantic Versioning guidelines](https://semver.org/).
|
||
|
|
|
||
|
|
## License
|
||
|
|
|
||
|
|
[MIT](https://opensource.org/licenses/MIT) © [Chen Fengyuan](https://chenfengyuan.com/)
|
||
|
|
|
||
|
|
[⬆ back to top](#table-of-contents)
|