从官方文档上可知该组件允许定义递增递减的步数控制:
<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回调中使用类似方法实现。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。