InputNumber 计数器

可以进行加减计算的计数器

基本使用

<div style={{ margin: '10px' }}>
  <InputNumber value={20} max={30} min={15} />
</div>

<div style={{ margin: '10px' }}>
  <InputNumber value={20} max={30} min={15} />
</div>

自定义配置

尺寸配置

设置size属性调整计数器的尺寸

<div style={{ margin: '10px' }}>
  <InputNumber
    value={20}
    max={30}
    min={15}
    size={'large'}
    style={{ marginRight: '5px' }}
  />
  <InputNumber
    value={20}
    max={30}
    min={15}
    size={'small'}
    style={{ marginRight: '5px' }}
  />
  <InputNumber value={20} max={30} min={15} size={'mini'} />
</div>

<div style={{ margin: '10px' }}>
  <InputNumber
    value={20}
    max={30}
    min={15}
    size={'large'}
    style={{ marginRight: '5px' }}
  />
  <InputNumber
    value={20}
    max={30}
    min={15}
    size={'small'}
    style={{ marginRight: '5px' }}
  />
  <InputNumber value={20} max={30} min={15} size={'mini'} />
</div>

设置计算的间隔

设置step属性设置计算加减的间隔

<div style={{ margin: '10px' }}>
  <InputNumber value={20} max={30} min={15} step={2} size={'large'} />
</div>

<div style={{ margin: '10px' }}>
  <InputNumber value={20} max={30} min={15} step={2} size={'large'} />
</div>

不可用

设置disabled属性设置组件不可用

<div style={{ margin: '10px' }}>
  <InputNumber value={20} size={'large'} disabled />
</div>

<div style={{ margin: '10px' }}>
  <InputNumber value={20} size={'large'} disabled />
</div>

属性

属性名	名称	类型	默认值
defaultValue	默认值	number	-
value	输入值	number	-
disabled	输入框禁用	boolean	false
min	输入/计算最小值	number	0
max	输入/计算最大值	number	Number.MAX_SAFE_INTEGER
step	计算间隔	number	1
size	组件尺寸	['large', 'small', 'mini']	'large'
onChange	数值变化回调	func	() {}

InputNumber 计数器

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}基本使用

自定义配置

尺寸配置

设置计算的间隔

不可用

属性

基本使用