BizNumberRange 数字区间

min / max 双数字输入联动：右值小于左值时自动交换纠正（搜索场景体验优于报错）。金额区间、年龄区间、耗时区间等检索与表单场景通用。

基础用法

至

元

当前值：[1000,5000]；在左框输入比右大的值（如 9999），失焦自动交换

v-model 为 [最小值, 最大值]（任一端可为 null）；unit 追加单位；在左框输入比右大的值观察自动交换。

<script setup lang="ts">
/** 基础用法：金额区间（左大于右自动交换纠正） */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizNumberRange } from 'vue3-ep-biz-lib'
import type { BizNumberRangeValue } from 'vue3-ep-biz-lib'

const range = ref<BizNumberRangeValue>([1000, 5000])

const onChange = (value: BizNumberRangeValue): void => {
  ElMessage.info(`区间：${String(value[0])} ~ ${String(value[1])}`)
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 480px">
    <BizNumberRange v-model="range" :min="0" :step="100" :precision="0" unit="元" @change="onChange" />
    <span style="font-size: 13px; color: var(--el-text-color-secondary)">
      当前值：{{ JSON.stringify(range) }}；在左框输入比右大的值（如 9999），失焦自动交换
    </span>
  </div>
</template>

检索面板过滤

耗时（ms）

至

6 / 6 条

接口耗时区间过滤：区间值 computed 联动表格数据，未填一端表示不限。

<script setup lang="ts">
/** 场景：检索面板——耗时区间 + 年龄区间组合过滤 */
import { computed, ref } from 'vue'
import { ElTable, ElTableColumn, ElTag } from 'element-plus'
import { BizNumberRange } from 'vue3-ep-biz-lib'
import type { BizNumberRangeValue } from 'vue3-ep-biz-lib'

const costRange = ref<BizNumberRangeValue>([null, null])

const allRows = Array.from({ length: 6 }, (_unused, i) => ({ api: `/api/order/${i + 1}`, cost: (i + 1) * 180 }))

const rows = computed(() => {
  const [min, max] = costRange.value
  return allRows.filter((row) => (min === null || row.cost >= min) && (max === null || row.cost <= max))
})
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 640px">
    <div style="display: flex; gap: 10px; align-items: center">
      <span style="font-size: 13px; color: var(--el-text-color-secondary)">耗时（ms）</span>
      <BizNumberRange v-model="costRange" :min="0" :step="50" start-placeholder="最小时延" end-placeholder="最大时延" />
      <ElTag size="small" type="info">{{ rows.length }} / {{ allRows.length }} 条</ElTag>
    </div>
    <ElTable :data="rows" size="small" border>
      <ElTableColumn prop="api" label="接口" />
      <ElTableColumn prop="cost" label="耗时(ms)" width="110" align="right" />
    </ElTable>
  </div>
</template>

商品价格区间筛选

价格（元）

至

元

40 件商品匹配

电商场景：区间实时联动匹配商品数，无匹配给警示色，清空一键复位。

<script setup lang="ts">
/** 场景：商品价格区间筛选——区间联动商品计数 */
import { computed, ref } from 'vue'
import { ElButton, ElTag } from 'element-plus'
import { BizNumberRange } from 'vue3-ep-biz-lib'
import type { BizNumberRangeValue } from 'vue3-ep-biz-lib'

const priceRange = ref<BizNumberRangeValue>([null, null])

const goods = Array.from({ length: 40 }, (_unused, i) => ({ name: `商品 ${String.fromCharCode(65 + (i % 26))}${i}`, price: (i % 50 + 1) * 20 }))

const matched = computed(() => {
  const [min, max] = priceRange.value
  return goods.filter((g) => (min === null || g.price >= min) && (max === null || g.price <= max)).length
})
</script>

<template>
  <div style="display: flex; gap: 12px; align-items: center; max-width: 640px; flex-wrap: wrap">
    <span style="font-size: 13px; color: var(--el-text-color-secondary)">价格（元）</span>
    <BizNumberRange v-model="priceRange" :min="0" :step="10" unit="元" />
    <ElTag size="small" :type="matched > 0 ? 'info' : 'warning'">{{ matched }} 件商品匹配</ElTag>
    <ElButton size="small" link @click="priceRange = [null, null]">清空</ElButton>
  </div>
</template>

投保年龄区间

至

周岁

该险种仅承保 18~60 周岁；min/max 已按业务边界限制输入范围

保险场景：min/max 按业务边界（0~100 周岁）限制输入，unit 定制「周岁」，占位文案业务化。

<script setup lang="ts">
/** 场景：投保年龄区间——业务边界约束与提示 */
import { ref } from 'vue'
import { ElAlert, ElButton, ElMessage } from 'element-plus'
import { BizNumberRange } from 'vue3-ep-biz-lib'
import type { BizNumberRangeValue } from 'vue3-ep-biz-lib'

const ageRange = ref<BizNumberRangeValue>([18, 60])

const onSubmit = (): void => {
  const [min, max] = ageRange.value
  if (min === null || max === null) {
    ElMessage.warning('请填写完整年龄区间')
    return
  }
  ElMessage.success(`投保年龄范围：${min} ~ ${max} 周岁`)
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 520px">
    <BizNumberRange
      v-model="ageRange"
      :min="0"
      :max="100"
      :precision="0"
      unit="周岁"
      start-placeholder="最小投保年龄"
      end-placeholder="最大投保年龄"
    />
    <ElAlert type="info" :closable="false" show-icon title="该险种仅承保 18~60 周岁；min/max 已按业务边界限制输入范围" />
    <ElButton style="width: fit-content" type="primary" size="small" @click="onSubmit">保存承保规则</ElButton>
  </div>
</template>

接口耗时区间与告警阈值

正常耗时（ms）

至

告警阈值（ms）

配置合理

监控场景：正常耗时区间 + 告警阈值联动校验（阈值必须大于区间上限），配置不合理即时标红。

<script setup lang="ts">
/** 场景：接口耗时区间设置——超阈值警示联动 */
import { computed, ref } from 'vue'
import { ElInputNumber, ElTag } from 'element-plus'
import { BizNumberRange } from 'vue3-ep-biz-lib'
import type { BizNumberRangeValue } from 'vue3-ep-biz-lib'

const normalRange = ref<BizNumberRangeValue>([50, 200])
const alertThreshold = ref(500)

const isAlertConfigValid = computed(() => {
  const [min, max] = normalRange.value
  return min !== null && max !== null && alertThreshold.value > max
})
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 560px">
    <div style="display: flex; gap: 10px; align-items: center">
      <span style="font-size: 13px; color: var(--el-text-color-secondary)">正常耗时（ms）</span>
      <BizNumberRange v-model="normalRange" :min="0" :step="10" unit="ms" />
    </div>
    <div style="display: flex; gap: 10px; align-items: center">
      <span style="font-size: 13px; color: var(--el-text-color-secondary)">告警阈值（ms）</span>
      <ElInputNumber v-model="alertThreshold" :min="0" :step="50" :controls="false" style="width: 120px" />
      <ElTag v-if="!isAlertConfigValid" size="small" type="danger">阈值必须大于正常区间上限</ElTag>
      <ElTag v-else size="small" type="success">配置合理</ElTag>
    </div>
  </div>
</template>

Props

属性名	类型	默认值	说明
v-model	`[number \| null, number \| null]`	—	区间值
min / max	`number`	—	允许的数值边界
step	`number`	`1`	步长
precision	`number`	—	小数位数
unit	`string`	—	单位后缀（如 `'元'` / `'ms'`）
separator	`string`	`'至'`	分隔文案
start-placeholder / end-placeholder	`string`	`'最小值' / '最大值'`	占位文案
disabled	`boolean`	`false`	禁用

Events

事件名	参数	说明
update:modelValue	`(value)`	区间变化
change	`(value)`	变化（含自动交换后的纠正值）

Slots

插槽名	说明
—	无自定义插槽

Expose

属性/方法	说明
—	无暴露实例

BizNumberRange 数字区间 ​

基础用法 ​

检索面板过滤 ​

商品价格区间筛选 ​

投保年龄区间 ​

接口耗时区间与告警阈值 ​

Props ​

Events ​

Slots ​

Expose ​