InputNumber 数字输入框

引用

import { InputNumber, regist } from "litos-ui";

regist(InputNumber);

演示

基础用法

数字输入框的基础用法，支持通过 + / - 按钮或键盘上下方向键增减数值。

禁用状态

通过 disabled 属性设置数字输入框为禁用状态。

步长设置

通过 step 属性设置每次增减的步长，默认为 1。支持小数步长。

精度控制

通过 precision 属性设置数值的小数精度，输入值会在失焦时自动格式化。

范围限制

通过 min 和 max 属性设置数值的有效范围，达到边界时对应按钮自动禁用。

尺寸

数字输入框有大中小三种尺寸。通过设置 size 为 large、small 分别设为大、小尺寸。若不设置 size，则尺寸默认为 default。

隐藏步进按钮

通过 controls-disabled 属性可以隐藏左右两侧的 + / - 步进按钮，仅保留输入框。

宽度与 InnerBlock

通过 width 属性自定义宽度，或使用 inner-block 属性使输入框铺满父元素。

监听事件

通过监听 change 事件获取值的变化，事件 detail 中包含 value 和 name。

API

InputNumber Attributes

名称	说明	类型	默认值
value	当前值	number	-
min	最小值	number	-
max	最大值	number	-
step	步长	number	1
precision	数值精度（小数位数）	number	-
placeholder	占位文本	string	-
size	尺寸，small、default、large	string	default
width	宽度	string	170px
block	宽度是否铺满父元素	boolean	false
disabled	是否禁用	boolean	false
controls-disabled	是否隐藏步进按钮	boolean	false
name	表单字段名	string	-

InputNumber Events

名称	说明	回调参数
input	值变化时触发（实时）	{ value: number, name: string }
change	值变化时触发（失焦或回车）	{ value: number, name: string }

InputNumber Methods

名称	说明	参数
focus	聚焦输入框	(): void

样式变量

名称	描述	默认值
--l-input-number-width	组件宽度	170px
--l-input-number-border-color	边框颜色	#d9d9d9
--l-input-number-bg	背景色	#ffffff
--l-input-number-btn-color	按钮文字颜色	#606266
--l-input-number-btn-bg	按钮背景色	#f5f7fa
--l-input-number-btn-hover-color	按钮悬浮文字颜色	var(--l-primary-color, #722ed1)
--l-input-number-btn-hover-bg	按钮悬浮背景色	var(--l-primary-color-light5, #f3e8ff)
--l-input-number-btn-disabled-color	禁用时按钮颜色	#c0c4cc
--l-form-control-height	组件高度	32px