提及

提及组件。

如何使用

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

注意事项

  • 若数据中不包括 label 属性,则务必指定 valueWith 参数。

数据源说明

静态

指一次性获取数据,数据来源于 asyncDataenum

实时

指每一次选择会触发HTTP请求,数据来源于 loadData

代码演示

基础样例

最简单的用法。

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

import { YelonFormModule, SFSchema } from '@yelon/form';
import type { SFMentionWidgetSchema } from '@yelon/form/widgets/mention';
import { MentionOnSearchTypes } from 'ng-zorro-antd/mention';
import { NzMessageService } from 'ng-zorro-antd/message';

const DATA = ['asdf', 'cipchk', '中文', 'にほんご'];

@Component({
  selector: 'form-mention-simple',
  template: ` <sf [schema]="schema" (formSubmit)="submit($event)" /> `,
  standalone: true,
  imports: [YelonFormModule]
})
export class FormMentionSimpleComponent {
  private readonly msg = inject(NzMessageService);
  schema: SFSchema = {
    properties: {
      remark: {
        type: 'string',
        title: '描述',
        enum: DATA,
        minimum: 2,
        maximum: 5,
        ui: {
          widget: 'mention',
          inputStyle: 'textarea'
        } as SFMentionWidgetSchema
      },
      // 异步静态数据源
      async: {
        type: 'string',
        title: 'Async',
        ui: {
          widget: 'mention',
          asynxcData: () => of(DATA).pipe(delay(1000))
        } as SFMentionWidgetSchema
      },
      // 实时数据
      real_time: {
        type: 'string',
        title: 'RealTime',
        ui: {
          widget: 'mention',
          loadData: (option: MentionOnSearchTypes) =>
            of(DATA.filter(item => item.indexOf(option.value) !== -1)).pipe(delay(300))
        } as SFMentionWidgetSchema
      }
    }
  };

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

API

schema属性

成员说明类型默认值
[enum]静态数据源SFSchemaEnumType[]-
[readOnly]禁用状态boolean-
[minimum]最少提及次数number-
[maximum]最多提及次数number-

ui属性

成员说明类型默认值
[asyncData]异步静态数据源(input: string) => Observable<SFSchemaEnumType[]>-
[size]大小,等同 nzSizestring-
[placeholder]在文字框中显示提示讯息string-
[loadData]实时数据(option: MentionOnSearchTypes) => Observable<SFSchemaEnumType[]>-
[notFoundContent]未找到时的内容string无匹配结果,轻敲空格完成输入
[placement]建议框位置button,topbutton
[prefix]触发弹出下拉框的字符'string' 'string[]'@
[valueWith]建议选项的取值方法(value: any) => string-
[select]下拉框选择建议时回调(value: any) => void-
[inputStyle]文本框类型text, textareatext
[autosize]自适应内容高度,可设置为 true|false 或对象:{ minRows: 2, maxRows: 6 }boolean,AutoSizeTypetrue
Loading...