Skip to main content

Numeric Input

WdInputNumber

Applicable Scenarios​

For numeric content input.

Example​

Interactive Preview​

Component Decoration​

Component Size​

Component Alignment​

Component Input State​

Component Style API Example​

#wd-page-root .wd-form-item .wd-input-number-input-number {
  border-color: cyan;
  color: cyan;
  background-color: black;
  border-width: 2px;
  border-radius: 6px;
}
#wd-page-root .wd-form-item .wd-input-number-btn {
  border-color: cyan;
  color: cyan;
  background-color: black;
  border-width: 2px;
  border-radius: 6px;
}`

Properties​

External properties received by the component

Property Name
Property Identifier
Type
Description
显示标题labelVisibleboolean

Default value: true

标题对齐labelAlignstring

表单场景下默认会跟随表单容器的标题对齐配置

标题换行labelWrapboolean

如果标题内容过长关闭时只显示一行、溢出省略；开启时换行展示。表单场景下默认会跟随表单容器的标题换行配置

标题位置layoutstring

设置标题在表单组件的展示位置，表单场景下默认会跟随表单容器的标题的位置配置

标题宽度labelWidthstring

您可以输入数值 + px、%等单位，示例：200px

表单场景下默认会跟随表单容器的标题宽度配置

标题提示labelTipsstring

PC/H5端生效

配置标题的工具提示内容

数据格式formatstring

提供数值（number）和百分比（percent）两种数据格式

Default value: "number"

小数位数decimalsnumber

要保留的小数位数，仅允许写入0和正整数，默认不限制小数位数

显示千分符thousandShowboolean

开启后，数字整数位每3位使用英文逗号（,）进行分隔

数值调整步长stepnumber

控制每次点击数值调整按钮后，增加/减少的数值大小

Example: 1

显示清空按钮clearableboolean

开启后提供快捷清空按钮

Default value: true

Example: false

前缀文字beforestring

表单输入框显示前缀文字

后缀文字afterstring

表单输入框显示后缀文字

前缀图标类型prefixTypestring

选择图标的类型

Example: ""

前缀图标prefixIconstring

表单输入框中展示前图标

Example: "success"

前缀图标prefixSrcstring

设置自定义图标地址

后缀图标类型suffixTypestring

选择图标的类型

Example: ""

后缀图标suffixIconstring

表单输入框中展示后图标

Example: "success"

后缀图标suffixSrcstring

设置自定义图标地址

下方提示extrastring

配置后提示内容常显在输入框下方

自动获取焦点focusboolean

开启后页面加载后光标自动定位到该输入框

移动端显示下划线borderedH5boolean

关闭后移动端不显示底部下划线

Default value: true

PC端显示输入边框borderedPcboolean

关闭后PC端不显示输入边框

Default value: true

最小值minnumber

限制输入数字的最小值，默认不限制

最大值maxnumber

限制输入数字的最大值，默认不限制

状态statusstring

Example: "edit"

必填requiredboolean
必填校验提示requiredMsgstring

Example: "该项为必填项"

必填标识requiredFlagboolean

启用后，组件若要求必填，则会显示必填星号标记

Default value: true

绑定字段namestring

表单字段的Key值，用于提交数据时，匹配数据模型字段标识。表单内需保证唯一。

Example: ""

输入值inputValuenumber

初始化的值，会根据大小限制、小数位数、数据格式进行换算

占位文字placeholderstring

Example: "请输入"

数值调整方式stepOptionstring

右侧调整仅在PC端生效，移动端将显示为普通的输入框

提供双侧调整（both）和右侧调整（right）两种样式模式，用于按数值调整步长进行数值调整

Default value: "right"

PC端组件尺寸sizestring

尺寸配置仅对PC端生效，表单场景下默认会跟随表单容器的组件尺寸配置

标题内容labelstring

Example: "标题"

Events​

Events exposed by the component. You can listen to component events to trigger external actions

Event Name
Event Code
Event Output Parameters event.detail
Applicable Scenarios
Description
值改变changeobject
  • value: number

    输入值
Compatible with all platforms

用户修改值后，组件失去焦点时触发，得到的是计算后的最终值

用户输入inputobject
  • value: number

    输入值
Compatible with all platforms

用户输入值时触发，得到的是计算后的值

聚焦focusobject
  • value: number

    输入值
Compatible with all platforms

-

失焦blurobject
  • value: number

    输入值
Compatible with all platforms

-

清除内容clearobject
  • originValue: number

    输入被清除前的值
Compatible with all platforms

-

Property API​

Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

Read-only Property Name
Property Identifier
Type
Description
绑定字段namestring

表单字段的Key值，用于提交数据时，匹配数据模型字段标识。表单内需保证唯一。

标题内容labelstring
数据格式formatstring

提供数值（number）和百分比（percent）两种数据格式

前缀文字beforestring

表单输入框显示前缀文字，表单提交场景下前缀文字会作为表单内容一起提交到数据模型中

后缀文字afterstring

表单输入框显示后缀文字，表单提交场景下后缀文字会作为表单内容一起提交到数据模型中

数值调整步长stepnumber

控制每次点击数值调整按钮后，增加/减少的数值大小

必填requiredboolean
最小值minnumber

限制输入数字的最小值，默认不限制

最大值maxnumber

限制输入数字的最大值，默认不限制

输入值valuenumber
是否展示visibleboolean

组件是否展示

是否禁用disabledboolean

组件是否禁用

是否只读readOnlyboolean

组件是否只读

Method API​

Through the Method API, you can programmatically trigger internal methods of components, such as submitting forms, displaying popups, etc. You can call component methods using $w.componentId.methodName, such as $w.form1.submit()

Method Name
Method Identifier
Parameters
Method Description
设置值setValuenumber值

通过 $w.id1.setValue(123) 设置组件值

设置显隐setVisibleboolean显示

通过 $w.id1.setVisible(false) 设置组件为隐藏

设置禁用setDisabledboolean禁用

通过 $w.id1.setDisabled(true) 设置组件为禁用

清空值clearValue

通过 $w.id1.clearValue() 清空组件值

设置只读setReadOnlyboolean只读

通过 $w.id1.setReadOnly(true) 设置组件为只读

触发校验handleValidate

通过 $w.id1.handleValidate() 校验组件值

清除校验clearValidate

通过 $w.id1.clearValidate() 清除组件校验

Style API​

Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

Name
Class Name
Description and Examples
根元素.wd-input-number-root组件最外层元素
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-input-number-root {
  /* Write CSS styles here */
}
H5 端根元素.wd-h5-input-number-root可设定 H5 端的根元素样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-h5-input-number-root {
  /* Write CSS styles here */
}
PC 端根元素.wd-pc-input-number-root可设定 PC 端的根元素样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-pc-input-number-root {
  /* Write CSS styles here */
}
小程序端根元素.wd-mp-input-number-root可设定小程序端的根元素样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-mp-input-number-root {
  /* Write CSS styles here */
}
组件标题样式.wd-input-number-root .wd-form-item-wrap__label组件标题元素

:scope .wd-form-item-wrap__label {
  font-size: 20px;
  color: gray;
  padding: 0;
  display: flex;
  align-items: center;
}
表单控件根节点样式.wd-input-number-root .wd-form-item-wrap__control设置表单控件根元素样式

:scope .wd-form-item-wrap__control {
  font-size: 20px;
  color: gray;
  padding: 0;
  display: flex;
  align-items: center;
}
编辑态-输入框样式.wd-input-number-root .wd-form-input-wrap组件边框、边距样式、背景色、字体大小、字体颜色等

:scope .wd-form-input-wrap {
  font-size: 20px;
  color: gray;
  text-align: right;
  height: 40px;
  width: 100%;
  background-color: lightgray;
  border-width: 2px;
  border-color: gray;
  border-radius: 0px;
}
编辑态-输入框样式（获取焦点）.wd-input-number-root .wd-form-input-wrap.is-focused编辑态-输入框样式（获取焦点）

:scope .wd-form-input-wrap.is-focused {
  background-color: lightgray;
  border-color: gray;
}
编辑态-占位文字样式.wd-input-number-root input::placeholder, .wd-input-number-root .weui-input__placeholder设置占位文字样式

:scope input::placeholder, :scope .weui-input__placeholder {
  color: lightgray;
}
编辑态-校验信息.wd-input-number-root .wd-g-text-error设置组件校验信息样式

:scope .wd-g-text-error {
    font-size: 20px;
    color: gray;
  }
提示文字.wd-input-number-root .wd-form-item__help-text设置组件提示文字样式

:scope .wd-form-item__help-text {
    font-size: 20px;
    color: gray;
  }
禁用态-输入框样式.wd-input-number-root .wd-form-input-wrap.is-disabled组件禁用样式

:scope .wd-form-input-wrap.is-disabled {
    font-size: 20px;
    color: gray;
    text-align: right;
    height: 40px;
    width: 200px;
    background-color: lightgray;
    border-width: 2px;
    border-color: gray;
    border-radius: 10px;
  }
只读态-表单值样式.wd-input-number-root .wd-form-item__readonly-value设置组件只读状态

:scope .wd-form-item__readonly-value {
    font-size: 20px;
    color: gray;
  }
前缀文字样式.wd-input-number-root .wd-form-input-group__addon-left设置组件前缀文字样式

:scope .wd-form-input-group__addon-left {
    font-size: 20px;
    color: gray;
    height: 40px;
    background-color: lightgray;
  }
/* 仅PC端生效 */
:scope.wd-pc-input-number-root .wd-form-input-group__addon-left {
    border-width: 2px;
    border-color: gray;
    border-radius: 10px 0 0 10px;
}
后缀文字样式.wd-input-number-root .wd-form-input-group__addon-right设置组件后缀文字样式

:scope .wd-form-input-group__addon-right {
    font-size: 20px;
    color: gray;
    height: 40px;
    background-color: lightgray;
  }
/* 仅PC端生效 */
:scope.wd-pc-input-number-root .wd-form-input-group__addon-right {
    border-width: 2px;
    border-color: gray;
    border-radius: 10px 0 0 10px;
}
数字输入左侧减按钮.wd-input-number-btn__before数字输入左侧减按钮
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-input-number-btn__before {
  /* Write CSS styles here */
}
数字输入右侧加按钮.wd-input-number-btn__after数字输入右侧加按钮
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-input-number-btn__after {
  /* Write CSS styles here */
}
数字输入右侧数字加按钮.wd-input-number__increase数字输入右侧数字加按钮
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-input-number__increase {
  /* Write CSS styles here */
}
数字输入右侧数字减按钮.wd-input-number__decrease数字输入右侧数字减按钮
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-input-number__decrease {
  /* Write CSS styles here */
}

Learn about Style API