• 简体中文

      • FileSizeInput

      FileSizeInput 用来输入文件大小、内存上限这类数值。界面上可以选择 Byte / KB / MB / GB，最终保存的值始终是字节数。

      基本用法

      MB
      Saved value: 20971520 bytes
      import React, { useState } from 'react';
import { FileSizeInput } from '@nocobase/client-v2';
import { Space, Typography } from 'antd';

export default function FileSizeInputDemo() {
  const [value, setValue] = useState<number | undefined>(20 * 1024 * 1024);

  return (
    <Space direction="vertical">
      <FileSizeInput
        value={value}
        onChange={setValue}
        min={1}
        max={1024 * 1024 * 1024}
      />
      <Typography.Text type="secondary">
        Saved value: {value ?? 'undefined'} bytes
      </Typography.Text>
    </Space>
  );
}

      在表单里使用：

      import { FileSizeInput } from '@nocobase/client-v2';

<Form.Item name="maxFileSize" label={t('Max file size')}>
  <FileSizeInput min={1} max={1024 * 1024 * 1024} defaultValue={20 * 1024 * 1024} />
</Form.Item>;

      API

      参数类型默认值说明
      valuenumber-当前字节数
      onChange(value?: number) => void-值变化回调，参数始终是字节数
      disabledbooleanfalse是否禁用
      minnumber1最小字节数
      maxnumberInfinity最大字节数
      defaultValuenumber20 * 1024 * 1024空值时用于推导初始单位

      输入框 blur 时，如果值为空或小于 min，会自动回到 min。切换单位时，组件会按当前显示值重新换算成字节数。