amis/docs/zh-CN/components/form/input-number.md
hsm-lv e6d2b2a035
fix:修复部分组件事件动作问题&补充组件动作表文档&规范事件动作参数类型 (#4152)
* fix:修复部分组件事件动作问题&补充组件动作表文档&规范事件动作参数类型

* fix:修复部分组件事件动作问题&补充组件动作表文档&规范事件动作参数类型

* fix:input-range类型声明问题

* fix:input-range单测问题

* fix:input-range单测u snapshot
2022-04-26 21:12:00 +08:00

4.1 KiB
Executable File

title description type group menuName icon order
InputNumber 数字输入框 0 null InputNumber 32

基本用法

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-number",
            "name": "number",
            "label": "数字"
        }
    ]
}

前后缀、千分分隔

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-number",
            "name": "number",
            "label": "数字",
            "value": 111111,
            "prefix": "$",
            "suffix": "%",
            "kilobitSeparator": true
        }
    ]
}

带单位数字

1.4.0 及以上版本

可以通过 unitOptions 设置数字的单位选项,和前面的前后缀不同,它的输出结果也将会是字符串,包含单位,默认取选项的第一个。

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "debug": true,
    "body": [
        {
            "type": "input-number",
            "name": "number",
            "label": "数字",
            "unitOptions": ["px", "%", "em"]
        }
    ]
}

加强版输入框

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-number",
            "name": "number",
            "label": "数字",
            "displayMode": "enhance"
        }
    ]
}

原生数字组件

原生数字组件将直接使用浏览器的实现,最终展现效果和浏览器有关,而且只支持 minmaxstep 这几个属性设置。

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "native-number",
            "name": "number",
            "label": "数字"
        }
    ]
}

属性表

当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置

属性名 类型 默认值 说明
min 模板 最小值
max 模板 最大值
step number 步长
precision number 精度,即小数点后几位
showSteps boolean 是否显示上下点击按钮
prefix string 前缀
suffix string 后缀
kilobitSeparator boolean 千分分隔
keyboard boolean 键盘事件(方向上下)
displayMode string 样式类型

事件表

事件名称 事件参数 说明
change value: number 值变化 输入值发生变化时触发
blur - -
focus - -

动作表

动作名称 动作配置 说明
clear - 清空
reset - 将值重置为resetValue,若没有配置resetValue,则清空
setValue value: number 更新的数值 更新数据