原生input实现区间范围输入

实现效果

在输入时，展示输入数据，再输入完成后根据区间范围判定，进行动态范围修正

效果图：

实现代码：

.pageRadius
  .text 页面范围
  .radiusInput
    input.start(:key="startKey" :value="statePage" @input.stop="startPageChange")
    .join ~
    input.end(:key="ednKey" :value="endPage" @input.stop="endPageChange")

const min = 1;
const max = 15;
const startKey = ref(1);
const ednKey = ref(1);
let time = null;
const startPageChange = (event) => {
  let value = isNaN(event.target.value) ? 1 : event.target.value;
  if (endPage.value && value >= endPage.value) {
    value = endPage.value - 1;
  }
  value = Math.min(max, Math.max(min, value));
  // 判断是否存在定时器，若存在则清除定时器（防抖函数）
  // 可以实现在1秒内多次修改数据，最终刷新最后一次的结果
  if (time !== null) {
    clearTimeout(time);
    time = null;
  }
  // 计时器是为了一秒后刷新数据正确范围
  time = setTimeout(() => {
    statePage.value = value;
    getReaderMobileStore.newStartPage = value;
    startKey.value = new Date().getTime();
    time = null;
  }, 1000);
};
const endPageChange = (event) => {
  let value = isNaN(event.target.value) ? 1 : event.target.value;
  if (statePage.value && value <= statePage.value) {
    value = statePage.value + 1;
  }
  value = Math.min(max, Math.max(min, value));
  // 判断是否存在定时器，若存在则清除定时器（防抖函数）
  // 可以实现在1秒内多次修改数据，最终刷新最后一次的结果
  if (time !== null) {
    clearTimeout(time);
    time = null;
  }
  // 计时器是为了一秒后刷新数据正确范围
  time = setTimeout(() => {
    endPage.value = value;
    getReaderMobileStore.newEndPage = value;
    ednKey.value = new Date().getTime();
    time = null;
  }, 1000);
};