二维码

当需要将链接转换成为二维码时使用。

如何使用

非内置模块,需要额外在 json-schema 注册 withQrCodeWidget

代码演示

基础样例

最简单的用法。

expand code expand code
import { Component, inject } from '@angular/core';

import { YelonFormModule, SFSchema } from '@yelon/form';
import type { SFQrCodeWidgetSchema } from '@yelon/form/widgets/qr-code';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'form-qr-code-simple',
  template: `<sf [schema]="schema" (formSubmit)="submit($event)" />`,
  standalone: true,
  imports: [YelonFormModule]
})
export class FormQrCodeSimpleComponent {
  private readonly msg = inject(NzMessageService);
  schema: SFSchema = {
    properties: {
      base: {
        type: 'string',
        title: 'Base',
        default: 'https://ng.yunzainfo.com/',
        ui: {
          widget: 'qr-code',
          refresh: console.log
        } as SFQrCodeWidgetSchema
      },
      icon: {
        type: 'string',
        title: 'With Icon',
        default: 'https://ng.yunzainfo.com/',
        ui: {
          widget: 'qr-code',
          icon: 'https://ng.yunzainfo.com/assets/logo-color.svg',
          bordered: true
        } as SFQrCodeWidgetSchema
      },
      color: {
        type: 'string',
        title: 'Color',
        default: 'https://ng.yunzainfo.com/',
        ui: {
          widget: 'qr-code',
          color: '#f50'
        } as SFQrCodeWidgetSchema
      }
    }
  };

  submit(value: {}): void {
    this.msg.success(JSON.stringify(value));
  }
}

API

ui属性

成员说明类型默认值
[color]二维码颜色string#000
[bgColor]二维码背景颜色string#FFFFFF
[qrSize]二维码大小number160
[padding]二维码填充number \| number[]0
[icon]二维码中 icon 地址string-
[iconSize]二维码中 icon 大小number40
[bordered]是否有边框booleantrue
[status]二维码状态'active'|'expired' |'loading'active
[level]二维码容错等级'L'|'M'|'Q'|'H'M
(refresh)点击"点击刷新"的回调EventEmitter<string>-
Loading...