Skip to content

Commit 41a455f

Browse files
selicensselicens
authored
feat: add qrcode (#6315)
* feat: add qrcode * fix: qrcode bug * fix: qrcode value required * refactor: props deconstruct
1 parent eda7247 commit 41a455f

22 files changed

+702
-2
lines changed

‎components/components.ts

+3
Original file line numberDiff line numberDiff line change
@@ -250,3 +250,6 @@ export type { WatermarkProps } from './watermark';
250250

251251
export type { SegmentedProps } from './segmented';
252252
export { default as Segmented } from './segmented';
253+
254+
export type { QRCodeProps } from './qrcode';
255+
export { default as QRCode } from './qrcode';

‎components/locale/en_US.ts

+4
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,10 @@ const localeValues: Locale = {
131131
Image: {
132132
preview: 'Preview',
133133
},
134+
QRCode: {
135+
expired: 'QR code expired',
136+
refresh: 'Refresh',
137+
},
134138
};
135139

136140
export default localeValues;

‎components/locale/index.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,10 @@ export interface Locale {
4242
copied?: any;
4343
expand?: any;
4444
};
45+
QRCode: {
46+
expired?: string;
47+
refresh?: string;
48+
};
4549
}
4650

4751
export interface LocaleProviderProps {

‎components/locale/zh_CN.ts

+4
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,10 @@ const localeValues: Locale = {
130130
Image: {
131131
preview: '预览',
132132
},
133+
QRCode: {
134+
expired: '二维码已过期',
135+
refresh: '点击刷新',
136+
},
133137
};
134138

135139
export default localeValues;

‎components/qrcode/__tests__/demo.test.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import demoTest from '../../../tests/shared/demoTest';
2+
3+
demoTest('qrcode');

‎components/qrcode/demo/base.vue

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<docs>
2+
---
3+
order: 0
4+
title:
5+
zh-CN: 基本使用
6+
en-US: Base
7+
---
8+
9+
## zh-CN
10+
11+
基本用法。
12+
13+
## en-US
14+
Basic Usage.
15+
</docs>
16+
17+
<template>
18+
<a-qrcode value="https://www.antdv.com/" />
19+
</template>
20+
21+
<script lang="ts">
22+
import { defineComponent } from 'vue';
23+
24+
export default defineComponent({
25+
setup() {
26+
return {};
27+
},
28+
});
29+
</script>

‎components/qrcode/demo/customColor.vue

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<docs>
2+
---
3+
order: 5
4+
title:
5+
zh-CN: 自定义颜色
6+
en-US: Custom Color
7+
---
8+
9+
## zh-CN
10+
11+
通过设置 `color` 自定义二维码颜色，通过设置 `style` 自定义背景颜色。
12+
13+
## en-US
14+
Custom Color.
15+
</docs>
16+
17+
<template>
18+
<a-space>
19+
<div><a-qrcode value="http://www.antv.com" color="#73d13d" /></div>
20+
<div><a-qrcode value="http://www.antv.com" color="#1677ff" /></div>
21+
</a-space>
22+
</template>
23+
24+
<script lang="ts">
25+
import { defineComponent } from 'vue';
26+
27+
export default defineComponent({
28+
setup() {
29+
return {};
30+
},
31+
});
32+
</script>

‎components/qrcode/demo/customSize.vue

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<docs>
2+
---
3+
order: 4
4+
title:
5+
zh-CN: 自定义尺寸
6+
en-US: Custom Size
7+
---
8+
9+
## zh-CN
10+
11+
自定义尺寸
12+
13+
## en-US
14+
Custom Size.
15+
</docs>
16+
17+
<template>
18+
<a-button-group>
19+
<a-button @click="decline">
20+
<template #icon><MinusOutlined /></template>
21+
samll
22+
</a-button>
23+
<a-button @click="increase">
24+
<template #icon><PlusOutlined /></template>
25+
large
26+
</a-button>
27+
</a-button-group>
28+
<br />
29+
<br />
30+
<a-qrcode
31+
:size="size"
32+
:icon-size="size / 4"
33+
error-level="H"
34+
value="https://www.antv.com"
35+
icon="https://www.antdv.com/assets/logo.1ef800a8.svg"
36+
/>
37+
</template>
38+
39+
<script lang="ts" setup>
40+
import { ref } from 'vue';
41+
import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
42+
43+
const size = ref(160);
44+
const decline = () => {
45+
size.value = size.value - 10;
46+
if (size.value < 48) {
47+
size.value = 48;
48+
}
49+
};
50+
const increase = () => {
51+
size.value = size.value + 10;
52+
if (size.value > 300) {
53+
size.value = 300;
54+
}
55+
};
56+
</script>

‎components/qrcode/demo/download.vue

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<docs>
2+
---
3+
order: 6
4+
title:
5+
zh-CN: 下载二维码
6+
en-US: Download QRCode
7+
---
8+
9+
## zh-CN
10+
11+
下载二维码的简单实现。
12+
13+
## en-US
14+
A way to download QRCode.
15+
</docs>
16+
17+
<template>
18+
<a-qrcode ref="qrcodeCanvasRef" value="http://www.antv.com" />
19+
<br />
20+
<br />
21+
<a-button type="primary" @click="dowloadChange">Downlaod</a-button>
22+
</template>
23+
24+
<script lang="ts">
25+
import { defineComponent, ref } from 'vue';
26+
27+
export default defineComponent({
28+
setup() {
29+
const qrcodeCanvasRef = ref();
30+
const dowloadChange = async () => {
31+
const url = await qrcodeCanvasRef.value.toDataUrl();
32+
const a = document.createElement('a');
33+
a.download = 'QRCode.png';
34+
a.href = url;
35+
document.body.appendChild(a);
36+
a.click();
37+
document.body.removeChild(a);
38+
};
39+
return {
40+
dowloadChange,
41+
qrcodeCanvasRef,
42+
};
43+
},
44+
});
45+
</script>

‎components/qrcode/demo/errorLevel.vue

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<docs>
2+
---
3+
order: 7
4+
title:
5+
zh-CN: 纠错比例
6+
en-US: Error Level
7+
---
8+
9+
## zh-CN
10+
11+
通过设置 errorLevel 调整不同的容错等级。
12+
13+
## en-US
14+
set Error Level.
15+
</docs>
16+
17+
<template>
18+
<a-qrcode v-model:error-level="level" value="http://www.antv.com" />
19+
<br />
20+
<br />
21+
<a-segmented v-model:value="level" :options="segmentedData" />
22+
</template>
23+
24+
<script lang="ts">
25+
import { defineComponent, ref, reactive } from 'vue';
26+
27+
export default defineComponent({
28+
setup() {
29+
const segmentedData = reactive(['L', 'M', 'Q', 'H']);
30+
const level = ref(segmentedData[0]);
31+
return {
32+
segmentedData,
33+
level,
34+
};
35+
},
36+
});
37+
</script>

‎components/qrcode/demo/icon.vue

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<docs>
2+
---
3+
order: 1
4+
title:
5+
zh-CN: 带 Icon 的例子
6+
en-US: With Icon
7+
---
8+
9+
## zh-CN
10+
11+
带 Icon 的二维码。
12+
13+
## en-US
14+
QRCode with Icon.
15+
</docs>
16+
17+
<template>
18+
<a-qrcode
19+
error-level="H"
20+
value="https://www.antv.com"
21+
icon="https://www.antdv.com/assets/logo.1ef800a8.svg"
22+
/>
23+
</template>
24+
25+
<script lang="ts">
26+
import { defineComponent } from 'vue';
27+
28+
export default defineComponent({
29+
setup() {
30+
return {};
31+
},
32+
});
33+
</script>

‎components/qrcode/demo/index.vue

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<demo-sort>
3+
<Base />
4+
<Icon />
5+
<Status />
6+
<CustomSize />
7+
<CustomColor />
8+
<Download />
9+
<ErrorLevel />
10+
<Popover />
11+
</demo-sort>
12+
</template>
13+
14+
<script lang="ts">
15+
import { defineComponent } from 'vue';
16+
import CN from '../index.zh-CN.md';
17+
import US from '../index.en-US.md';
18+
import Base from './base.vue';
19+
import Icon from './icon.vue';
20+
import Status from './status.vue';
21+
import CustomSize from './customSize.vue';
22+
import CustomColor from './customColor.vue';
23+
import Download from './download.vue';
24+
import ErrorLevel from './errorLevel.vue';
25+
import Popover from './popover.vue';
26+
27+
export default defineComponent({
28+
components: { Base, Icon, Status, CustomSize, CustomColor, Download, ErrorLevel, Popover },
29+
category: 'Components',
30+
subtitle: '二维码',
31+
type: 'Data Display',
32+
title: 'QRCode',
33+
CN,
34+
US,
35+
});
36+
</script>

‎components/qrcode/demo/popover.vue

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<docs>
2+
---
3+
order: 8
4+
title:
5+
zh-CN: 高级用法
6+
en-US: Advanced Usage
7+
---
8+
9+
## zh-CN
10+
11+
带气泡卡片的例子。
12+
13+
## en-US
14+
With Popover.
15+
</docs>
16+
17+
<template>
18+
<a-popover>
19+
<template #content>
20+
<a-qrcode value="http://www.antv.com" />
21+
</template>
22+
<img width="100" height="100" src="https://aliyuncdn.antdv.com/logo.png" />
23+
</a-popover>
24+
</template>
25+
26+
<script lang="ts">
27+
import { defineComponent } from 'vue';
28+
29+
export default defineComponent({
30+
setup() {
31+
return {};
32+
},
33+
});
34+
</script>

‎components/qrcode/demo/status.vue

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<docs>
2+
---
3+
order: 3
4+
title:
5+
zh-CN: 不同的状态
6+
en-US: other status
7+
---
8+
9+
## zh-CN
10+
11+
可以通过 status 的值控制二维码的状态。
12+
13+
## en-US
14+
The status can be controlled by the value `status`.
15+
</docs>
16+
17+
<template>
18+
<a-space>
19+
<div><a-qrcode value="http://www.antv.com" status="loading" /></div>
20+
<div><a-qrcode value="http://www.antv.com" status="expired" @refresh="refreshChange" /></div>
21+
</a-space>
22+
</template>
23+
24+
<script lang="ts">
25+
import { defineComponent } from 'vue';
26+
27+
export default defineComponent({
28+
setup() {
29+
const refreshChange = () => alert('updated');
30+
return {
31+
refreshChange,
32+
};
33+
},
34+
});
35+
</script>

0 commit comments

Comments
 (0)