amis2/docs/zh-CN/components/form/input-range.md
2022-05-31 15:05:54 +08:00

14 KiB
Executable File
Raw Blame History

title description type group menuName icon order
InputRange 滑块 0 null InputRange 范围 38

可以用于选择单个数值或数值范围。

基本用法

默认是单个数值,结果是个整数。

{
    "type": "form",
    "debug": true,
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-range",
            "label": '滑块',
            "name": 'range',
            "value": 20
        }
    ]
}

选择范围

对于范围的渲染,结果将是个字符串,两个数值通过分隔符来隔开。

{
    "type": "form",
    "debug": true,
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-range",
            "name": "range",
            "label": "range",
            "multiple": true,
            "value": {
                "min": 10,
                "max": 50
            }
        }
    ]
}

控制调整的粒度

使用 step 可以控制调整粒度,默认是 1。

{
    "type": "form",
    "debug": true,
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-range",
            "name": "range",
            "min": 0,
            "max": 1,
            "step": 0.01,
            "label": "range"
        }
    ]
}

禁用

使用disabled禁用滑块。

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-range",
            "label": '滑块',
            "name": 'range',
            "value": 10,
            "disabled": true,
            "showInput": true,
            "clearable": true
        }
    ]
}

显示步长

开启showSteps可显示每个step长度

{
    "type": "form",
    "debug": true,
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-range",
            "label": '滑块',
            "name": 'range',
            "max": 10,
            "showSteps": true
        }
    ]
}

分割块数

通过parts可对整个滑动条平均分为parts块。

{
    "type": "form",
    "debug": true,
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-range",
            "label": '滑块',
            "name": 'range',
            "showSteps": true,
            "parts": 20
        }
    ]
}

刻度标记

通过marks可对刻度进行自定义。

{
    "type": "form",
    "debug": true,
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-range",
            "label": '滑块',
            "name": 'range',
            "parts": 5,
            "marks": {
                '0': '0',
                '20%': '20Mbps',
                '40%': '40Mbps',
                '60%': '60Mbps',
                '80%': '80Mbps',
                '100': '100'
            }
        }
    ]
}

输入框

通过开启showInput会展示输入框,输入框数据于滑块数据同步。

{
    "type": "form",
    "debug": true,
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-range",
            "name": "range",
            "label": "range",
            "value": 20,
            "showInput": true
        }
    ]
}
{
    "type": "form",
    "debug": true,
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-range",
            "name": "range",
            "label": "range",
            "multiple": true,
            "value": [10, 20],
            "showInput": true
        }
    ]
}

清除输入

在打开showInput输入框的前提下,开启clearable可对数据进行清除。

{
    "type": "form",
    "debug": true,
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-range",
            "name": "range",
            "label": "range",
            "value": 20,
            "showInput": true,
            "clearable": true
        }
    ]
}

显示标签

标签默认在 hover 和拖拽过程中展示,通过tooltipVisible或者tipFormatter可指定标签是否展示。标签默认展示在滑块上方,通过tooltipPlacement可指定标签展示的位置。

{
    "type": "form",
    "debug": true,
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-range",
            "name": "range",
            "label": "range",
            "value": 20,
            "tooltipVisible": true,
            "tooltipPlacement": "right"
        }
    ]
}

属性表

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

属性名 类型 默认值 说明
className string css 类名
value number or string or {min: number, max: number} or [number, number]
min number 0 最小值
max number 100 最大值
disabled boolean false 是否禁用
step number 1 步长
showSteps boolean false 是否显示步长
parts number or number[] 1 分割的块数
主持数组传入分块的节点
marks { [number | string]: ReactNode } or { [number | string]: { style: CSSProperties, label: ReactNode } } 刻度标记
- 支持自定义样式
- 设置百分比
tooltipVisible boolean false 是否显示滑块标签
tooltipPlacement auto or bottom or left or right top 滑块标签的位置,默认auto,方向自适应
前置条件tooltipVisible 不为 false 时有效
tipFormatter function 控制滑块标签显隐函数
前置条件tooltipVisible 不为 false 时有效
multiple boolean false 支持选择范围
joinValues boolean true 默认为 true,选择的 value 会通过 delimiter 连接起来,否则直接将以{min: 1, max: 100}的形式提交
前置条件:开启multiple时有效
delimiter string , 分隔符
unit string 单位
clearable boolean false 是否可清除
前置条件:开启showInput时有效
showInput boolean false 是否显示输入框
onChange function 当 组件 的值发生改变时,会触发 onChange 事件,并把改变后的值作为参数传入
onAfterChange function onmouseup 触发时机一致,把当前值作为参数传入

事件表

当前组件会对外派发以下事件,可以通过onEvent来监听这些事件,并通过actions来配置执行的动作,在actions中可以通过event.data.xxx事件参数变量来获取事件产生的数据,详细请查看事件动作

事件名称 事件参数 说明
change event.data.value: number | string |{min: number, max: number} 当前值 当值变化时触发的事件
blur event.data.value: number | string |{min: number, max: number} 当前值 当设置 showInput 为 true 时,输入框失去焦点时触发
focus event.data.value: number | string |{min: number, max: number} 当前值 当设置 showInput 为 true 时,输入框获取焦点时触发

动作表

当前组件对外暴露以下特性动作,其他组件可以通过指定actionType: 动作名称componentId: 该组件id来触发这些动作,动作配置可以通过args: {动作配置项名称: xxx}来配置具体的参数,详细请查看事件动作

动作名称 动作配置 说明
clear - 清除输入框
前置条件showInput 和 clearable 都为 true
reset - 将值重置为resetValue,若没有配置resetValue,则清空
setValue value: number | string | {min: number, max: number} 更新的值 更新数据