Skip to content

RangeInput 范围输入框

规则

基础示例

js
const rule = {
    type:"rangeInput",
    title:"价格范围",
    field:"priceRange",
    value: [],
    props: {
        placeholder: ["最低价", "最高价"],
        clearable: true,
    },
}

Props 配置示例

分隔符自定义

js
const rule = {
    type:"rangeInput",
    title:"价格范围",
    field:"priceRange",
    value: [],
    props: {
        placeholder: ["最低价", "最高价"],
        separator: "~",
        clearable: true,
    }
}

禁用状态

js
const rule = {
    type:"rangeInput",
    title:"价格范围",
    field:"priceRange",
    value: [100, 500],
    props: {
        disabled: true,
    }
}

Events 事件示例

监听范围变化

js
const rule = {
    type:"rangeInput",
    title:"价格范围",
    field:"priceRange",
    value: [],
    props: {
        placeholder: ["最低价", "最高价"],
        clearable: true,
    },
    on: {
        change: (value, context) => {
            console.log('范围改变:', value, context);
        },
        enter: (value, context) => {
            console.log('按下回车:', value, context);
        },
    },
}

完整配置项:TDesign_Range_Input

value :Array

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用