Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/scopewu/qrcode.vue
A Vue.js component to generate qrcode. Supports both Vue 2 and Vue 3.
https://github.com/scopewu/qrcode.vue
qrcode qrcode-element qrcode-vue vue vue-component
Last synced: about 2 months ago
JSON representation
A Vue.js component to generate qrcode. Supports both Vue 2 and Vue 3.
- Host: GitHub
- URL: https://github.com/scopewu/qrcode.vue
- Owner: scopewu
- License: mit
- Created: 2017-04-16T01:09:12.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-07-25T07:37:06.000Z (about 2 months ago)
- Last Synced: 2024-07-26T00:26:45.969Z (about 2 months ago)
- Topics: qrcode, qrcode-element, qrcode-vue, vue, vue-component
- Language: TypeScript
- Homepage: https://qr-vue.tie.pub
- Size: 1.26 MB
- Stars: 693
- Watchers: 10
- Forks: 86
- Open Issues: 6
-
Metadata Files:
- Readme: README-zh_cn.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesomeLibrary - qrcode.vue - A Vue.js component to generate qrcode. (语言资源库 / typescript)
README
# qrcode.vue
⚠️ 如果你正在使用 Vue 3，请升级 `qrcode.vue` 到 `3.x`;
🔒 如果你正在使用 Vue 2，请保持 `qrcode.vue` 的版本为 `1.x`;
一款 Vue.js 二维码组件，同时支持 Vue 2 和 Vue 3.
[](https://github.com/scopewu/qrcode.vue/blob/master/LICENSE)
## 快速开始
快速添加 `qrcode.vue` 组件到项目中
```bash
npm install --save qrcode.vue # yarn add qrcode.vue
```
```
dist/
|--- qrcode.vue.cjs.js // CommonJS
|--- qrcode.vue.esm.js // ES module
|--- qrcode.vue.browser.js // UMD for browser or require.js or CommonJS
|--- qrcode.vue.browser.min.js // UMD Minimum size
```
## 使用
e.g.
```javascript
import { createApp } from 'vue'
import QrcodeVue from 'qrcode.vue'
createApp({
data: {
value: 'https://example.com',
},
template: '',
components: {
QrcodeVue,
},
}).mount('#root')
```
或者，在独有单文件扩展 `*.vue` 中使用：
```html
import QrcodeVue from 'qrcode.vue'
export default {
data() {
return {
value: 'https://example.com',
size: 300,
}
},
components: {
QrcodeVue,
},
}
```
在 Vue 3 中配合 `TypeScript` 使用：
```html
import { ref } from 'vue'
import QrcodeVue from 'qrcode.vue'
import type { Level, RenderAs } from 'qrcode.vue'
const value = ref<String>('qrcode')
const level = ref<Level>('M')
const renderAs = ref<RenderAs>('svg')
```
## Component props
### `value`
- 类型：`string`
- 默认值：`''`
二维码的内容值。
### `size`
- 类型：`number`
- 默认值：`100`
二维码大小。
### `render-as`
- 类型：`RenderAs('canvas' | 'svg')`
- 默认值：`canvas`
生成二维码的 HTML 标签，可选 `canvas` 或 `svg`。其中 `svg` 可以用于 SSR。
### `margin`
- 类型：`number`
- 默认值：`0`
定义空白区的宽度应该是多少。
### `level`
- 类型：`Level('L' | 'M' | 'Q' | 'H')`
- 默认值：`H`
二维码的容错能力等级，取值为 'L', 'M', 'Q', 'H' 之一。了解更多，[维基百科：QR_code](https://en.wikipedia.org/wiki/QR_code#Error_correction)。
### `background`
- 类型：`string`
- 默认值：`#ffffff`
二维码背景颜色。
### `foreground`
- 类型：`string`
- 默认值：`#000000`
二维码前景颜色。
### `class`
- 类型：`string`
- 默认值：`''`
传递给二维码根元素的类名。
## 软件许可
copyright © 2021 scopewu, license by [MIT](https://github.com/scopewu/qrcode.vue/blob/master/LICENSE)