@hbtv/list-input
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.19 • Public • Published

    list-input 组件

    安装方法

    npm install @hbtv/list-input --save

    更新日志

    查看更新日志

    使用方法

    const columns: ListColumnType[] = [
        { title: '文本类型', dataIndex: 'text' },
        {
          title: '可选输入',
          dataIndex: 'select',
          componentType: 'select',
          config:{
            select:{
              mode:'multiple',
              valueEnum: [
                { label: '选项1', value: '1' },
                { label: '选项2', value: '2' },
              ],
            } 
          },
        },
        {
          title: '上传图片',
          dataIndex: 'image',
          componentType: 'upload',
          displayRule: 'image(64)',
          width: 300,
          config:{
            upload:{
              fileType:['image'],
            } 
          },
        },
    ];
    
    <ListInput name="options" columns={columns} dnd />

    API

    export interface ListInputProps<RecordType = any> {
      name?: string;
      columns: ListColumnType<RecordType>[];
      value?: RecordType[];
      onChange?: (value: RecordType[]) => void;
      dnd?: boolean;
      loading?: boolean;
      uploadServices?: ServicesType;
      actions?: React.ReactNode[];
      confirmOnRemoveRecord?: boolean;  // 1.2.8 加入
      valueEnum?: {
        [k: string]: ValueEnumType[] | TreeDataType[];
      };
    }
    export type ListDataType<RecordType = { [k: string]: any }> = RecordType & {
      isNew?: boolean;
      onEdit?: boolean;
      index?: number;
    };

    columns 说明

    // columns 的定义
    export interface ListColumnType<RecordType = any> {
      title: string;
      dataIndex?: string;
      componentType?: ListComponentType;
      defaultValue?: any;
      rules?: RuleObject[];
      displayRule?: string;
      splitBy?: string;
      extra?: string;
      placeholder?: string;
      config?: {
        select?: SelectConfigType;
        upload?: MediaUploadProps;
        list?: ListInputProps;
        dateTime?: DateTimeConfigType;  // 1.2.2 加入
      };
      fields?: ListColumnType[];
      width?: number;
      allowEdit?: boolean;
      render?: (value: any, row: RecordType, index: number) => React.ReactNode;
    }
    
    // 组件类型的定义
    export type ListComponentType =
      | 'text' // 1.2.8 后可以进行配置, 详细配置 TextConfigType
      | 'select'
      | 'arrayInput' // 新增
      | 'switch'
      | 'upload'|
      | 'dateTime'; // 1.2.2 开始直接这个了,详细配置在 config中
    
    
    export interface TextConfigType {
      component?: 'text' | 'textArea' | 'inputNumber' | 'password'
      minRows?: number;  // 仅对  textArea
      step?: number | string; // 仅对 inputNumber
    }
    
    export interface DateTimeConfigType {
      component?: 'year' | 'month' | 'date' | 'time' | 'dateTime';
      mode?: 'picker' | 'range';
    }
    
    
    export interface SelectConfigType {
      component?: 'select' | 'checkbox' | 'radio' | 'cascader' | 'tree';
      mode?: 'single' | 'tags' | 'multiple';
      valueEnum?: ValueEnumType[] | string;
      changeOnSelect?: boolean;
    }
    
    // 枚举值的定义
    export interface ValueEnumType {
      label: string;
      value: string;
    }
    
    
    export interface ListTreeType {
      value: string;
      title: string;
      children?: ListTreeType[];
    }

    uploadServices 说明

    详见@hbtv/media-upload 组件说明文档

    Keywords

    none

    Install

    npm i @hbtv/list-input

    DownloadsWeekly Downloads

    71

    Version

    1.4.19

    License

    MIT

    Unpacked Size

    100 kB

    Total Files

    19

    Last publish

    Collaborators

    • gegang
    • zix2002
    • yugong
    • dokey
    • gogoing
    • xuezhidp
    • aa719032411