1

从官方文档上可知该组件允许定义递增递减的步数控制:

<template>
  <el-input-number v-model="num" :step="2" step-strictly></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num: 2
      }
    }
  };
</script>

但是却不支持跳过指定的某数字,例如:

<template>
  <el-input-number v-model="num" :step="32" :min="32" :max="128" step-strictly></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num: 2
      }
    }
  };
</script>

设定指定步长为32,最小值为32,最大值为128时,该组件会输入32,64,96,128这四个数字,然而实际需求中会出现跳过某个数的需求,那么该怎么做呢? 直接上代码(一个vue指令)

<el-input-number
    v-model="configForm.batch"
    <!--skip为跳过的值,left为当点击'减'时跳过96后显示的值,right则为'加'时跳过96后显示的值-->
    v-skipNumber="{ left: 64, skip: 96, right: 128 }"
    :min="32"
    :max="128"
    :step="32"
    step-strictly
></el-input-number>
..........
Vue.directive("skipNumber", {
    update(el, binding, vnode) {
      const element = el.getElementsByTagName("input")[0];
      <!--获取旧值-->
      const oldValue = element.value;
      <!--获取当前值-->
      const currentValue = vnode.data.model.value;
      const skip = binding.value.skip;
      const left = binding.value.left;
      const right = binding.value.right;
      <!--判断点击的是加还是减-->
      <!--加-->
      if (currentValue > oldValue) {
       if (currentValue === skip) {
       <!--使用回调使值生效-->
         vnode.data.model.callback(right);
       }
      <!--减-->
      } else {
          if (currentValue === skip) {
            vnode.data.model.callback(left);
          }
      }
    },
});

当然也可以在change回调中使用类似方法实现。


爱魅Ame
0 声望0 粉丝

前端