qrcode.vue 3.5.1 → 3.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README-zh_cn.md +46 -5
- package/README.md +44 -6
- package/dist/qrcode.vue.browser.js +197 -30
- package/dist/qrcode.vue.browser.min.js +2 -2
- package/dist/qrcode.vue.cjs.js +197 -30
- package/dist/qrcode.vue.esm.js +198 -31
- package/dist/rstest.config.d.ts +2 -0
- package/dist/{index.d.ts → src/index.d.ts} +140 -0
- package/package.json +12 -8
- package/CHANGELOG.md +0 -111
- package/README-ja.md +0 -184
- /package/dist/{qrcodegen.d.ts → src/qrcodegen.d.ts} +0 -0
package/CHANGELOG.md
DELETED
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
## [3.5.0] - 2024-09-26
|
|
2
|
-
|
|
3
|
-
### Feature
|
|
4
|
-
|
|
5
|
-
- Support logo image for Qrcode.
|
|
6
|
-
- Exports separate `QrcodeCanvas` and `QrcodeSvg` components
|
|
7
|
-
|
|
8
|
-
Direct references to `QrcodeVue` in common.js and cdn now require the `default` field:
|
|
9
|
-
|
|
10
|
-
```js
|
|
11
|
-
const QrcodeVue = require('qrcode.vue').default
|
|
12
|
-
const { default: QrcodeVue, QrcodeCanvas, QrcodeSvg } = require('qrcode.vue')
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
```html
|
|
16
|
-
<!--With HTML-->
|
|
17
|
-
<div id="root">
|
|
18
|
-
<p class="flex space-x">
|
|
19
|
-
<qrcode-vue :value="test" render-as="svg"></qrcode-vue>
|
|
20
|
-
<qrcode-canvas :value="test"></qrcode-canvas>
|
|
21
|
-
<qrcode-svg :value="test" :image-settings="imageSettings"></qrcode-svg>
|
|
22
|
-
</p>
|
|
23
|
-
<p><input v-model="test" /></p>
|
|
24
|
-
</div>
|
|
25
|
-
<script src="https://cdn.jsdelivr.net/npm/vue@3.5/dist/vue.global.prod.js"></script>
|
|
26
|
-
<script src="https://cdn.jsdelivr.net/npm/qrcode.vue@3.5/dist/qrcode.vue.browser.min.js"></script>
|
|
27
|
-
|
|
28
|
-
<script>
|
|
29
|
-
Vue.createApp({
|
|
30
|
-
data() { return {
|
|
31
|
-
test: 'Hello World',
|
|
32
|
-
imageSettings: {
|
|
33
|
-
src: 'https://avatars.githubusercontent.com/u/15811268',
|
|
34
|
-
width: 30,
|
|
35
|
-
height: 30,
|
|
36
|
-
excavate: true,
|
|
37
|
-
},
|
|
38
|
-
}},
|
|
39
|
-
components: {
|
|
40
|
-
QrcodeVue: QrcodeVue.default,
|
|
41
|
-
QrcodeCanvas: QrcodeVue.QrcodeCanvas,
|
|
42
|
-
QrcodeSvg: QrcodeVue.QrcodeSvg,
|
|
43
|
-
},
|
|
44
|
-
}).mount('#root')
|
|
45
|
-
</script>
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
## [3.4.1] - 2023-08-05
|
|
49
|
-
|
|
50
|
-
### BUGFIX
|
|
51
|
-
|
|
52
|
-
- Fixed TypeScript type export error.
|
|
53
|
-
|
|
54
|
-
## [3.4.0] - 2023-04-15
|
|
55
|
-
|
|
56
|
-
### Performance
|
|
57
|
-
|
|
58
|
-
- remove `qr.js` dependency, use `nayuki/QR-Code-generator` instead.
|
|
59
|
-
|
|
60
|
-
## [3.3.1] - 2021-09-11
|
|
61
|
-
|
|
62
|
-
### BUGFIX
|
|
63
|
-
|
|
64
|
-
- Fix document description error, adjust `renderAs` to `render-as`.
|
|
65
|
-
|
|
66
|
-
## [3.2.0] - 2020-12-20
|
|
67
|
-
|
|
68
|
-
### Feature
|
|
69
|
-
|
|
70
|
-
- support typescript.
|
|
71
|
-
|
|
72
|
-
## [3.1.0] - 2020-12-20
|
|
73
|
-
|
|
74
|
-
### Feature
|
|
75
|
-
|
|
76
|
-
- Add support margin for QRcode.
|
|
77
|
-
|
|
78
|
-
## [3.0.0] - 2020-12-20
|
|
79
|
-
|
|
80
|
-
### Feature
|
|
81
|
-
|
|
82
|
-
- Support Vue 3
|
|
83
|
-
|
|
84
|
-
## [1.7.0] - 2019-11-10
|
|
85
|
-
|
|
86
|
-
### Feature
|
|
87
|
-
|
|
88
|
-
- Support generate Qrcode as svg.
|
|
89
|
-
|
|
90
|
-
## [1.6.3] - 2019-09-16
|
|
91
|
-
|
|
92
|
-
### Update
|
|
93
|
-
|
|
94
|
-
- Perfect documentation.
|
|
95
|
-
- Add eslint check.
|
|
96
|
-
|
|
97
|
-
## [1.6.2] - 2019-05-21
|
|
98
|
-
|
|
99
|
-
### Remove:
|
|
100
|
-
|
|
101
|
-
- `backingStorePixelRatio` is deprecated. more infomation [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D).
|
|
102
|
-
|
|
103
|
-
## [1.6.0] - 2018-04-14
|
|
104
|
-
|
|
105
|
-
### Changed
|
|
106
|
-
|
|
107
|
-
- Use Vue render function, not use jsx.
|
|
108
|
-
|
|
109
|
-
### Bugfixs
|
|
110
|
-
|
|
111
|
-
- convert utf-16 to utf-8.
|
package/README-ja.md
DELETED
|
@@ -1,184 +0,0 @@
|
|
|
1
|
-
# qrcode.vue
|
|
2
|
-
|
|
3
|
-
⚠️ 現在、Vue 3.xを使用している場合は、`qrcode.vue`を`3.x`にアップグレードしてください。
|
|
4
|
-
|
|
5
|
-
🔒 Vue 2.xを使用している場合は、バージョン`1.x`を使用し続けてください。
|
|
6
|
-
|
|
7
|
-
[QRコード](https://en.wikipedia.org/wiki/QR_code)を生成するためのVue.jsコンポーネントです。Vue 2とVue 3の両方をサポートしています。
|
|
8
|
-
|
|
9
|
-
[](https://github.com/scopewu/qrcode.vue/blob/master/LICENSE)
|
|
10
|
-
|
|
11
|
-
[English](./README.md)
|
|
12
|
-
|
|
13
|
-
## インストール
|
|
14
|
-
|
|
15
|
-
`qrcode.vue`コンポーネントをVue.jsアプリに使用できます。
|
|
16
|
-
|
|
17
|
-
```bash
|
|
18
|
-
npm install --save qrcode.vue # yarn add qrcode.vue
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
```
|
|
22
|
-
dist/
|
|
23
|
-
|--- qrcode.vue.cjs.js // CommonJS
|
|
24
|
-
|--- qrcode.vue.esm.js // ESモジュール
|
|
25
|
-
|--- qrcode.vue.browser.js // ブラウザまたはrequire.jsまたはCommonJS用のUMD
|
|
26
|
-
|--- qrcode.vue.browser.min.js // 最小サイズのUMD
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
## 使用方法
|
|
30
|
-
|
|
31
|
-
例:
|
|
32
|
-
|
|
33
|
-
```javascript
|
|
34
|
-
import { createApp } from 'vue'
|
|
35
|
-
import QrcodeVue from 'qrcode.vue'
|
|
36
|
-
|
|
37
|
-
createApp({
|
|
38
|
-
data: {
|
|
39
|
-
value: 'https://example.com',
|
|
40
|
-
},
|
|
41
|
-
template: '<qrcode-vue :value="value"></qrcode-vue>',
|
|
42
|
-
components: {
|
|
43
|
-
QrcodeVue,
|
|
44
|
-
},
|
|
45
|
-
}).mount('#root')
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
または、`*.vue`拡張子の単一ファイルコンポーネントで使用します:
|
|
49
|
-
|
|
50
|
-
```html
|
|
51
|
-
<template>
|
|
52
|
-
<qrcode-vue :value="value" :size="size" level="H" />
|
|
53
|
-
</template>
|
|
54
|
-
<script>
|
|
55
|
-
import QrcodeVue from 'qrcode.vue'
|
|
56
|
-
|
|
57
|
-
export default {
|
|
58
|
-
data() {
|
|
59
|
-
return {
|
|
60
|
-
value: 'https://example.com',
|
|
61
|
-
size: 300,
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
|
-
components: {
|
|
65
|
-
QrcodeVue,
|
|
66
|
-
},
|
|
67
|
-
}
|
|
68
|
-
</script>
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
Vue 3で`TypeScript`を使用する場合:
|
|
72
|
-
|
|
73
|
-
```html
|
|
74
|
-
<template>
|
|
75
|
-
<qrcode-vue
|
|
76
|
-
:value="value"
|
|
77
|
-
:level="level"
|
|
78
|
-
:render-as="renderAs"
|
|
79
|
-
:background="background"
|
|
80
|
-
:foreground='foreground'
|
|
81
|
-
:image-settings='imageSettings'
|
|
82
|
-
/>
|
|
83
|
-
</template>
|
|
84
|
-
<script setup lang="ts">
|
|
85
|
-
import { ref } from 'vue'
|
|
86
|
-
import QrcodeVue from 'qrcode.vue'
|
|
87
|
-
import type { Level, RenderAs, ImageSettings } from 'qrcode.vue'
|
|
88
|
-
|
|
89
|
-
const value = ref('qrcode')
|
|
90
|
-
const level = ref<Level>('M')
|
|
91
|
-
const renderAs = ref<RenderAs>('svg')
|
|
92
|
-
const background = ref('#ffffff')
|
|
93
|
-
const foreground = ref('#000000')
|
|
94
|
-
const margin = ref(0)
|
|
95
|
-
const imageSettings = ref<ImageSettings>({
|
|
96
|
-
src: 'https://github.com/scopewu.png',
|
|
97
|
-
width: 30,
|
|
98
|
-
height: 30,
|
|
99
|
-
// x: 10,
|
|
100
|
-
// y: 10,
|
|
101
|
-
excavate: true,
|
|
102
|
-
})
|
|
103
|
-
</script>
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
## コンポーネントプロパティ
|
|
107
|
-
|
|
108
|
-
### `value`
|
|
109
|
-
|
|
110
|
-
- タイプ:`string`
|
|
111
|
-
- デフォルト:`''`
|
|
112
|
-
|
|
113
|
-
QRコードの内容。
|
|
114
|
-
|
|
115
|
-
### `size`
|
|
116
|
-
|
|
117
|
-
- タイプ:`number`
|
|
118
|
-
- デフォルト:`100`
|
|
119
|
-
|
|
120
|
-
QRコード要素のサイズ。
|
|
121
|
-
|
|
122
|
-
### `render-as`
|
|
123
|
-
|
|
124
|
-
- タイプ:`RenderAs('canvas' | 'svg')`
|
|
125
|
-
- デフォルト:`canvas`
|
|
126
|
-
|
|
127
|
-
`canvas`または`svg`としてQRコードを生成します。`svg`プロパティはSSRで動作します。
|
|
128
|
-
|
|
129
|
-
### `margin`
|
|
130
|
-
|
|
131
|
-
- タイプ:`number`
|
|
132
|
-
- デフォルト:`0`
|
|
133
|
-
|
|
134
|
-
静かなゾーンの幅を定義します。
|
|
135
|
-
|
|
136
|
-
### `level`
|
|
137
|
-
|
|
138
|
-
- タイプ:`Level('L' | 'M' | 'Q' | 'H')`
|
|
139
|
-
- デフォルト:`H`
|
|
140
|
-
|
|
141
|
-
QRコードの誤り訂正レベル('L'、'M'、'Q'、'H'のいずれか)。詳細については、[wikipedia: QR_code](https://en.wikipedia.org/wiki/QR_code#Error_correction)を参照してください。
|
|
142
|
-
|
|
143
|
-
### `background`
|
|
144
|
-
|
|
145
|
-
- タイプ:`string`
|
|
146
|
-
- デフォルト:`#ffffff`
|
|
147
|
-
|
|
148
|
-
QRコードの背景色。
|
|
149
|
-
|
|
150
|
-
### `foreground`
|
|
151
|
-
|
|
152
|
-
- タイプ:`string`
|
|
153
|
-
- デフォルト:`#000000`
|
|
154
|
-
|
|
155
|
-
QRコードの前景色。
|
|
156
|
-
|
|
157
|
-
### `image-settings`
|
|
158
|
-
|
|
159
|
-
- タイプ: `ImageSettings`
|
|
160
|
-
- デフォルト: `{}`
|
|
161
|
-
|
|
162
|
-
```ts
|
|
163
|
-
export type ImageSettings = {
|
|
164
|
-
src: string, // The URL of image.
|
|
165
|
-
x?: number, // The horizontal offset. When not specified, will center the image.
|
|
166
|
-
y?: number, // The vertical offset. When not specified, will center the image.
|
|
167
|
-
height: number, // The height of image
|
|
168
|
-
width: number, // The height of image
|
|
169
|
-
excavate?: boolean, // Whether or not to "excavate" the modules around the image.
|
|
170
|
-
}
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
The settings to support qrcode image logo.
|
|
174
|
-
|
|
175
|
-
### `class`
|
|
176
|
-
|
|
177
|
-
- タイプ:`string`
|
|
178
|
-
- デフォルト:`''`
|
|
179
|
-
|
|
180
|
-
QRコード要素のクラス名。
|
|
181
|
-
|
|
182
|
-
## ライセンス
|
|
183
|
-
|
|
184
|
-
copyright © 2021 @scopewu, license by [MIT](https://github.com/scopewu/qrcode.vue/blob/main/LICENSE)
|
|
File without changes
|