RangeNum 数字区间

基于 antd InputNumber 封装的数字区间组件，支持前后缀、最大值最小值设定。

用法示例

基础用法

-

设置最大值最小值

最小值10，最大值100

-

设置后缀

%

-

%

复制代码

查看代码

<template>
  <a-flex vertical :gap="10">
    <a-flex vertical :gap="5">
      基础用法
      <s-range-num
        v-model:value="value1"
      />
    </a-flex>

    <a-flex vertical :gap="5">
      <a-space>
        设置最大值最小值:
        <span class="text-[12px] text-[#999]">最小值10，最大值100</span>
      </a-space>
      <s-range-num
        v-model:value="value2"
        :min-num="10"
        :max-num="100"
      />
    </a-flex>

    <a-flex vertical :gap="5">
      设置后缀
      <s-range-num
        v-model:value="value3"
        suffix="%"
      />
    </a-flex>
  </a-flex>
</template>

API

属性

属性名	说明	类型	默认值
value(v-model)	当前选中的值	number[]	[]
maxNum	最大值设定	number	-
minNum	最小值设定	number	0
suffix	后缀文本	string	-
autoWidth	是否自适应宽度(开启后会按照父元素均分)	boolean	false

注意事项

1. 组件会在输入框失焦时触发值更新
2. 当输入值超过最大值时，会自动设置为最大值
3. 当输入值小于最小值时，会自动设置为最小值
4. 当起始值大于结束值时，会自动调整两个值相等
5. 当结束值小于起始值时，会自动调整两个值相等
6. 当两个值都为空时，会返回空数组