Skip to content

Commit 6f36d75

Browse files
OriginRingOriginRing
authored
feat(module:qrcode): add nzStatusRender to support customize state rendering (#8714)
1 parent a66a86a commit 6f36d75

11 files changed

+100
-35
lines changed

‎components/qr-code/demo/background.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 5
2+
order: 8
33
title:
44
zh-CN: 具有自定义背景颜色
55
en-US: With custom background color

‎components/qr-code/demo/color.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 4
2+
order: 6
33
title:
44
zh-CN: 自定义颜色
55
en-US: Custom Color

‎components/qr-code/demo/custom-status.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 4
3+
title:
4+
zh-CN: 自定义状态渲染器
5+
en-US: custom status
6+
---
7+
8+
## zh-CN
9+
10+
可以通过 `nzStatusRender` 的值控制二维码不同状态的渲染逻辑。
11+
12+
## en-US
13+
14+
You can control the rendering logic of the QR code in different states through the value of `nzStatusRender`.

‎components/qr-code/demo/custom-status.ts

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Component } from '@angular/core';
2+
3+
import { NzIconModule } from 'ng-zorro-antd/icon';
4+
import { NzQRCodeModule } from 'ng-zorro-antd/qr-code';
5+
6+
@Component({
7+
selector: 'nz-demo-qr-code-custom-status',
8+
standalone: true,
9+
imports: [NzQRCodeModule, NzIconModule],
10+
template: `
11+
<nz-qrcode nzValue="https://ng.ant.design/" nzStatusRender="NgZorro"></nz-qrcode>
12+
<nz-qrcode nzValue="https://ng.ant.design/" [nzStatusRender]="customTemplate"></nz-qrcode>
13+
<ng-template #customTemplate>
14+
<div>
15+
<span nz-icon nzType="check-circle" nzTheme="outline" style="color: red"></span>
16+
success
17+
</div>
18+
</ng-template>
19+
`,
20+
styles: [
21+
`
22+
nz-qrcode {
23+
margin-right: 12px;
24+
}
25+
`
26+
]
27+
})
28+
export class NzDemoQrCodeCustomStatusComponent {}

‎components/qr-code/demo/download.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 7
2+
order: 12
33
title:
44
zh-CN: 下载二维码
55
en-US: Download QRCode

‎components/qr-code/demo/error-level.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 6
2+
order: 10
33
title:
44
zh-CN: 容错等级
55
en-US: Error Level

‎components/qr-code/demo/padding.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 3
2+
order: 5
33
title:
44
zh-CN: 带衬垫
55
en-US: With padding

‎components/qr-code/doc/index.en-US.md

+14-13
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,20 @@ import { NzQRCodeModule } from 'ng-zorro-antd/qr-code';
2020

2121
### nz-qrcode:standalone
2222

23-
| Property | Description | Type | Default |
24-
|----------------|-------------------------------------|---------------------------------|-----------|
25-
| `[nzValue]` | scanned link | `string` | - |
26-
| `[nzColor]` | QR code Color | `string` | `#000` |
27-
| `[nzBgColor]` | QR code background color | `string` | `#FFFFFF` |
28-
| `[nzSize]` | QR code Size | `number` | `160` |
29-
| `[nzPadding]` | QR code Padding | `number \| number[]` | `0` |
30-
| `[nzIcon]` | Icon address in QR code | `string` | - |
31-
| `[nzIconSize]` | The size of the icon in the QR code | `number` | `40` |
32-
| `[nzBordered]` | Whether has border style | `boolean` | `true` |
33-
| `[nzStatus]` | QR code status | `'active'｜'expired' ｜'loading'` | `active` |
34-
| `[nzLevel]` | Error Code Level | `'L'｜'M'｜'Q'｜'H'` | `M` |
35-
| `(nzRefresh)` | callback | `EventEmitter<string>` | - |
23+
| Property | Description | Type | Default |
24+
| ------------------ | ----------------------------------- | --------------------------------- | --------- |
25+
| `[nzValue]` | scanned link | `string` | - |
26+
| `[nzColor]` | QR code Color | `string` | `#000` |
27+
| `[nzBgColor]` | QR code background color | `string` | `#FFFFFF` |
28+
| `[nzSize]` | QR code Size | `number` | `160` |
29+
| `[nzPadding]` | QR code Padding | `number \| number[]` | `0` |
30+
| `[nzIcon]` | Icon address in QR code | `string` | - |
31+
| `[nzIconSize]` | The size of the icon in the QR code | `number` | `40` |
32+
| `[nzBordered]` | Whether has border style | `boolean` | `true` |
33+
| `[nzStatus]` | QR code status | `'active'｜'expired' ｜'loading'` | `active` |
34+
| `[nzStatusRender]` | custom status | `TemplateRef<void> \| string` | - |
35+
| `[nzLevel]` | Error Code Level | `'L'｜'M'｜'Q'｜'H'` | `M` |
36+
| `(nzRefresh)` | callback | `EventEmitter<string>` | - |
3637

3738
## Note
3839

‎components/qr-code/doc/index.zh-CN.md

+14-13
Original file line numberDiff line numberDiff line change
@@ -21,19 +21,20 @@ import { NzQRCodeModule } from 'ng-zorro-antd/qr-code';
2121

2222
### nz-qrcode:standalone
2323

24-
| 参数 | 说明 | 类型 | 默认值 |
25-
|----------------|--------------|---------------------------------|-----------|
26-
| `[nzValue]` | 扫描后的地址 | `string` | - |
27-
| `[nzColor]` | 二维码颜色 | `string` | `#000` |
28-
| `[nzBgColor]` | 二维码背景颜色 | `string` | `#FFFFFF` |
29-
| `[nzSize]` | 二维码大小 | `number` | `160` |
30-
| `[nzPadding]` | 二维码填充 | `number \| number[]` | `0` |
31-
| `[nzIcon]` | 二维码中 icon 地址 | `string` | - |
32-
| `[nzIconSize]` | 二维码中 icon 大小 | `number` | `40` |
33-
| `[nzBordered]` | 是否有边框 | `boolean` | `true` |
34-
| `[nzStatus]` | 二维码状态 | `'active'｜'expired' ｜'loading'` | `active` |
35-
| `[nzLevel]` | 二维码容错等级 | `'L'｜'M'｜'Q'｜'H'` | `M` |
36-
| `(nzRefresh)` | 点击"点击刷新"的回调 | `EventEmitter<string>` | - |
24+
| 参数 | 说明 | 类型 | 默认值 |
25+
| ------------------ | -------------------- | --------------------------------- | --------- |
26+
| `[nzValue]` | 扫描后的地址 | `string` | - |
27+
| `[nzColor]` | 二维码颜色 | `string` | `#000` |
28+
| `[nzBgColor]` | 二维码背景颜色 | `string` | `#FFFFFF` |
29+
| `[nzSize]` | 二维码大小 | `number` | `160` |
30+
| `[nzPadding]` | 二维码填充 | `number \| number[]` | `0` |
31+
| `[nzIcon]` | 二维码中 icon 地址 | `string` | - |
32+
| `[nzIconSize]` | 二维码中 icon 大小 | `number` | `40` |
33+
| `[nzBordered]` | 是否有边框 | `boolean` | `true` |
34+
| `[nzStatus]` | 二维码状态 | `'active'｜'expired' ｜'loading'` | `active` |
35+
| `[nzStatusRender]` | 自定义状态渲染器 | `TemplateRef<void> \| string` | - |
36+
| `[nzLevel]` | 二维码容错等级 | `'L'｜'M'｜'Q'｜'H'` | `M` |
37+
| `(nzRefresh)` | 点击"点击刷新"的回调 | `EventEmitter<string>` | - |
3738

3839
## 注意
3940

‎components/qr-code/qrcode.component.spec.ts

+15-1
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,13 @@ describe('nz-qrcode', () => {
4343
expect(widthView.style.width).toBe('200px');
4444
});
4545

46+
it('qr code custom status', () => {
47+
testComponent.statusRender = 'custom status';
48+
fixture.detectChanges();
49+
const statusView = resultEl.nativeElement.querySelector('.ant-qrcode-mask');
50+
expect(statusView.innerText).toBe('custom status');
51+
});
52+
4653
it('qr code status', () => {
4754
const statusList: Array<'active' | 'expired' | 'loading' | 'scanned'> = ['expired', 'loading', 'scanned'];
4855

@@ -63,11 +70,18 @@ describe('nz-qrcode', () => {
6370
@Component({
6471
standalone: true,
6572
imports: [NzQRCodeModule],
66-
template: `<nz-qrcode [nzValue]="value" [nzSize]="size" [nzBordered]="bordered" [nzStatus]="status"></nz-qrcode>`
73+
template: `<nz-qrcode
74+
[nzValue]="value"
75+
[nzSize]="size"
76+
[nzBordered]="bordered"
77+
[nzStatus]="status"
78+
[nzStatusRender]="statusRender"
79+
></nz-qrcode>`
6780
})
6881
export class NzTestQrCodeBasicComponent {
6982
value: string = 'https://ng.ant.design/';
7083
size: number = 160;
7184
bordered: boolean = true;
85+
statusRender: string | null = null;
7286
status: 'active' | 'expired' | 'loading' | 'scanned' = 'active';
7387
}

‎components/qr-code/qrcode.component.ts

+10-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
import { isPlatformBrowser } from '@angular/common';
6+
import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
77
import {
88
AfterViewInit,
99
booleanAttribute,
@@ -21,12 +21,14 @@ import {
2121
Output,
2222
PLATFORM_ID,
2323
SimpleChanges,
24+
TemplateRef,
2425
ViewChild
2526
} from '@angular/core';
2627
import { Subject } from 'rxjs';
2728
import { takeUntil } from 'rxjs/operators';
2829

2930
import { NzButtonModule } from 'ng-zorro-antd/button';
31+
import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
3032
import { NzI18nService, NzQRCodeI18nInterface } from 'ng-zorro-antd/i18n';
3133
import { NzIconModule } from 'ng-zorro-antd/icon';
3234
import { NzSpinModule } from 'ng-zorro-antd/spin';
@@ -38,7 +40,11 @@ import { drawCanvas, ERROR_LEVEL_MAP, plotQRCodeData } from './qrcode';
3840
selector: 'nz-qrcode',
3941
exportAs: 'nzQRCode',
4042
template: `
41-
@if (nzStatus !== 'active') {
43+
@if (!!nzStatusRender) {
44+
<div class="ant-qrcode-mask">
45+
<ng-container *nzStringTemplateOutlet="nzStatusRender">{{ nzStatusRender }}</ng-container>
46+
</div>
47+
} @else if (nzStatus !== 'active') {
4248
<div class="ant-qrcode-mask">
4349
@switch (nzStatus) {
4450
@case ('loading') {
@@ -70,7 +76,7 @@ import { drawCanvas, ERROR_LEVEL_MAP, plotQRCodeData } from './qrcode';
7076
class: 'ant-qrcode',
7177
'[class.ant-qrcode-border]': `nzBordered`
7278
},
73-
imports: [NzSpinModule, NzButtonModule, NzIconModule],
79+
imports: [NzSpinModule, NzButtonModule, NzIconModule, NgTemplateOutlet, NzStringTemplateOutletDirective],
7480
standalone: true
7581
})
7682
export class NzQRCodeComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
@@ -85,6 +91,7 @@ export class NzQRCodeComponent implements OnInit, AfterViewInit, OnChanges, OnDe
8591
@Input({ transform: booleanAttribute }) nzBordered: boolean = true;
8692
@Input() nzStatus: 'active' | 'expired' | 'loading' | 'scanned' = 'active';
8793
@Input() nzLevel: keyof typeof ERROR_LEVEL_MAP = 'M';
94+
@Input() nzStatusRender?: TemplateRef<void> | string | null = null;
8895

8996
@Output() readonly nzRefresh = new EventEmitter<string>();
9097

0 commit comments

Comments
 (0)