InputNumberRange 数字范围输入框

简介

两个数字输入框拼成的范围输入，值是 [开始, 结束] 数组。两端都填上才会产生值，清空任意一端回到 undefined；填反了（开始大于结束）会在离开组件时自动交换成「小 - 大」。在表单里用 field-type="numberrange"。

代码演示

基础使用

v-model 绑定 [开始, 结束]；只有两端都填上时才更新，change 也只在完整时触发。填反了不会中途打断输入，失焦后自动交换两个值（传进来的初值倒挂也会被纠正）。

<template>
  <div class="stack">
    <co-input-number-range
      v-model="value"
      start-placeholder="最小值"
      end-placeholder="最大值"
      @change="onChange"
    />

    <p class="state">
      当前值：
      <code>{{ display }}</code>
    </p>
    <p class="hint">填反了（开始 &gt; 结束）不会边输入边跳，离开组件后自动交换成「小 - 大」。</p>
    <p class="hint">已触发 change {{ changed }} 次</p>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';

const value = ref<number[]>();

const changed = ref(0);

const display = computed(() => (value.value ? value.value.join(' - ') : '未完成'));

const onChange = () => {
  changed.value += 1;
};
</script>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 320px;
}

.state {
  margin: 0;
  font-size: 12px;
  color: var(--el-text-color-regular);
}

.hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--el-text-color-secondary);
}
</style>

范围与精度

min / max 限制取值区间，precision 控制小数位，step 是步进；step-strictly 只能取 step 的整数倍。

<template>
  <div class="stack">
    <div class="block">
      <p class="label">金额：0 ~ 99999.99，保留两位小数</p>
      <co-input-number-range
        v-model="price"
        :min="0"
        :max="99999.99"
        :step="0.01"
        :precision="2"
        start-placeholder="最低价"
        end-placeholder="最高价"
      />
    </div>

    <div class="block">
      <p class="label">折扣：0 ~ 100，只能按 10 递增（step-strictly）</p>
      <co-input-number-range
        v-model="discount"
        :min="0"
        :max="100"
        :step="10"
        step-strictly
        start-placeholder="0"
        end-placeholder="100"
      />
    </div>

    <p class="state">
      金额：
      <code>{{ price ? price.join(' - ') : '-' }}</code>
      ／ 折扣：
      <code>{{ discount ? discount.join(' - ') : '-' }}</code>
    </p>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const price = ref<number[]>([99.9, 999.99]);

const discount = ref<number[]>([20, 80]);
</script>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 360px;
}

.block {
  width: 100%;
}

.label {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.state {
  margin: 0;
  font-size: 12px;
  color: var(--el-text-color-regular);
}
</style>

禁用与只读

disabled 完全不可交互；readonly 可聚焦、可复制但不能改。只填一端时 model-value 保持 undefined。

<template>
  <div class="stack">
    <div class="block">
      <p class="label">禁用</p>
      <co-input-number-range v-model="disabledValue" disabled :min="0" :max="100" />
    </div>

    <div class="block">
      <p class="label">只读</p>
      <co-input-number-range v-model="readonlyValue" readonly :min="0" :max="100" />
    </div>

    <div class="block">
      <p class="label">只填了一端：值保持 undefined</p>
      <co-input-number-range v-model="halfValue" :min="0" :max="100" start-placeholder="最小值" />
      <p class="state">
        modelValue：
        <code>{{ String(halfValue) }}</code>
      </p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const disabledValue = ref<number[]>([10, 60]);

const readonlyValue = ref<number[]>([20, 80]);

const halfValue = ref<number[]>();
</script>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 320px;
}

.block {
  width: 100%;
}

.label {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.state {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--el-text-color-regular);
}
</style>

在表单里使用

字段类型是 numberrange，required 要两端都填上才算通过；field-props 里传的 min / max / step 会透给组件。

<template>
  <div class="stack">
    <co-form :model="model" label-width="auto" :submit="onSubmit">
      <co-form-item
        v-model="model.price"
        prop="price"
        label="价格区间"
        field-type="numberrange"
        width="sm"
        :field-props="{ min: 0, max: 99999, precision: 2 }"
        :rules="[{ required: true, message: '请把价格区间两端都填上' }]"
      />
      <co-form-item
        v-model="model.stock"
        prop="stock"
        label="库存区间"
        field-type="numberrange"
        width="sm"
        :field-props="{ min: 0, step: 10 }"
      />
    </co-form>

    <p class="state">
      提交值：
      <code>{{ submitted }}</code>
    </p>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';

const model = reactive<{ price?: number[]; stock?: number[] }>({
  price: undefined,
  stock: undefined,
});

const submitted = ref('-');

const onSubmit = async () => {
  submitted.value = JSON.stringify(model);
  ElMessage.success('已提交');
};
</script>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.state {
  margin: 0;
  font-size: 12px;
  color: var(--el-text-color-regular);
}
</style>

API

InputNumberRangeProps

属性	描述	类型	默认值
model-value (v-model)	绑定的范围值	number[]	-
min	允许的最小值（两端共用）	number	-
max	允许的最大值（两端共用）	number	-
step	计数器步长	number	-
step-strictly	是否只能输入 step 的倍数	boolean	false
precision	数值精度	number	-
start-placeholder	开始输入框的 placeholder 属性	string	-
end-placeholder	结束输入框的 placeholder 属性	string	-
readonly	是否只读	boolean	false
disabled	是否禁用	boolean	false
validate-event	是否触发表单验证	boolean	true

InputNumberRangeEmits

事件	描述	类型
update:modelValue	绑定值被改变时触发	(value: number[] | undefined) => void
change	绑定值被改变时触发	(value: number[] | undefined) => void