Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/scopewu/qrcode.vue
A Vue component to generate qrcode. Supports both Vue 2 and Vue 3. 一款同时支援 Vue 2 和 Vue 3 的二维码组件。
https://github.com/scopewu/qrcode.vue
qrcode qrcode-element qrcode-vue vue vue-component
Last synced: 15 days ago
JSON representation
A Vue component to generate qrcode. Supports both Vue 2 and Vue 3. 一款同时支援 Vue 2 和 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-10-22T03:29:13.000Z (22 days ago)
- Last Synced: 2024-10-23T05:22:51.976Z (21 days ago)
- Topics: qrcode, qrcode-element, qrcode-vue, vue, vue-component
- Language: TypeScript
- Homepage: https://qr-vue.tie.pub
- Size: 1.17 MB
- Stars: 713
- Watchers: 10
- Forks: 87
- Open Issues: 3
-
Metadata Files:
- Readme: README-ja.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.xを使用している場合は、`qrcode.vue`を`3.x`にアップグレードしてください。
🔒 Vue 2.xを使用している場合は、バージョン`1.x`を使用し続けてください。
[QRコード](https://en.wikipedia.org/wiki/QR_code)を生成するためのVue.jsコンポーネントです。Vue 2とVue 3の両方をサポートしています。
[](https://github.com/scopewu/qrcode.vue/blob/master/LICENSE)
[English](./README.md)
## インストール
`qrcode.vue`コンポーネントをVue.jsアプリに使用できます。
```bash
npm install --save qrcode.vue # yarn add qrcode.vue
```
```
dist/
|--- qrcode.vue.cjs.js // CommonJS
|--- qrcode.vue.esm.js // ESモジュール
|--- qrcode.vue.browser.js // ブラウザまたはrequire.jsまたはCommonJS用のUMD
|--- qrcode.vue.browser.min.js // 最小サイズのUMD
```
## 使用方法
例：
```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, ImageSettings } from 'qrcode.vue'
const value = ref('qrcode')
const level = ref<Level>('M')
const renderAs = ref<RenderAs>('svg')
const background = ref('#ffffff')
const foreground = ref('#000000')
const margin = ref(0)
const imageSettings = ref<ImageSettings>({
src: 'https://github.com/scopewu.png',
width: 30,
height: 30,
// x: 10,
// y: 10,
excavate: true,
})
```
## コンポーネントプロパティ
### `value`
- タイプ：`string`
- デフォルト：`''`
QRコードの内容。
### `size`
- タイプ：`number`
- デフォルト：`100`
QRコード要素のサイズ。
### `render-as`
- タイプ：`RenderAs('canvas' | 'svg')`
- デフォルト：`canvas`
`canvas`または`svg`としてQRコードを生成します。`svg`プロパティはSSRで動作します。
### `margin`
- タイプ：`number`
- デフォルト：`0`
静かなゾーンの幅を定義します。
### `level`
- タイプ：`Level('L' | 'M' | 'Q' | 'H')`
- デフォルト：`H`
QRコードの誤り訂正レベル（'L'、'M'、'Q'、'H'のいずれか）。詳細については、[wikipedia: QR_code](https://en.wikipedia.org/wiki/QR_code#Error_correction)を参照してください。
### `background`
- タイプ：`string`
- デフォルト：`#ffffff`
QRコードの背景色。
### `foreground`
- タイプ：`string`
- デフォルト：`#000000`
QRコードの前景色。
### `image-settings`
- タイプ: `ImageSettings`
- デフォルト: `{}`
```ts
export type ImageSettings = {
src: string, // The URL of image.
x?: number, // The horizontal offset. When not specified, will center the image.
y?: number, // The vertical offset. When not specified, will center the image.
height: number, // The height of image
width: number, // The height of image
excavate?: boolean, // Whether or not to "excavate" the modules around the image.
}
```
The settings to support qrcode image logo.
### `class`
- タイプ：`string`
- デフォルト：`''`
QRコード要素のクラス名。
## ライセンス
copyright © 2021 @scopewu, license by [MIT](https://github.com/scopewu/qrcode.vue/blob/main/LICENSE)