NumberInput 数字输入框

通过鼠标或键盘输入数字的输入组件。

NumberInput

Props

Prop NameTypeRequiredDefaultDescription
value
union
值,受控
defaultValue
union
默认值,非受控
onChange
func
function noop() {}
修改回调
onNumberChange
func
function noop() {}
有效的修改回调,使用按钮改变值或者输入、回车后失焦时触发,可防止监听到无效的回调
@param
当前的值,必为有效数字
disabled
bool
禁用
readOnly
bool
只读
max
number
最大值
min
number
-MAX_SAFE_INTEGER
最小值
step
union
1
按钮每次变动大小
upStep
union
增加按钮点击增加的大小,会覆盖 step
downStep
union
减少按钮点击减少的大小,会覆盖 step
upHandler
node
自定义'+'按钮
downHandler
node
自定义'-'按钮
formatter
func
定义数值展示格式化
parser
func
function defaultParser(input) { return input.replace(/[^\w.-]+/g, ''); }
定义输入内容过滤
precision
number
精度,小数点位数
styleType
enum
StyleType[0]
样式风格
size
enum
'md'
尺寸
suffix
node
自定义后缀
inputStyle
object
input框自定义样式
computeValidNumber
func
v => v
计算合法值
hideHandler
bool
是否隐藏操作按钮
tooltip
union
输入提示,hover 和输入焦点时显示,可直接传入 tooltip 内容,或传入 tooltip 的 props,props 参考 tooltip 组件文档 注意,如果使用自定义 props 中的 visible 和 onVisibleChange 则需要自己去控制 tooltip 的显示隐藏

说明

  • 这是 NumberInput 数字输入框组件

演示

演示

VIEW CODE ( LIVE )

disabled - 禁用

VIEW CODE ( LIVE )

readOnly - 只读

VIEW CODE ( LIVE )

max/min - 最大值/最小值

VIEW CODE ( LIVE )

formatter - 自定义展示格式

VIEW CODE ( LIVE )

parser - 自定义可接受输入格式

VIEW CODE ( LIVE )

precision - 小数点个数

VIEW CODE ( LIVE )

step - 步长

VIEW CODE ( LIVE )

styleType - 样式类型

VIEW CODE ( LIVE )

size - 尺寸

VIEW CODE ( LIVE )

suffix - 后缀

VIEW CODE ( LIVE )

inputStyle - 自定义输入框样式

VIEW CODE ( LIVE )

upHandler/downHandler - 自定义 +/- 按钮

VIEW CODE ( LIVE )

computeValidNumber - 自定义合法值的方法

VIEW CODE ( LIVE )

onNumberChange - 只监听有效数值修改

VIEW CODE ( LIVE )

uncontrolled - 受控非受控

VIEW CODE ( LIVE )

tooltip - 提示文案

VIEW CODE ( LIVE )
Copyright © 2021-2024 UCloud 优刻得科技股份有限公司