官方文档:InputNumber
-
要求:输入框内的值test①必须为a的整数倍(且增减按钮以a整数倍增减)②最小值为a③最大值为max④允许手动输入(且手动输入也需判断)
<a-input-number v-model:value="test" :min="a" :max="max" @change="change" :controls="false" //关闭自带的增减按钮 > //自定义增减按钮 <template #addonBefore> <div class="cursor-pointer" @click="add">+</div> </template> <template #addonAfter> <div class="cursor-pointer" @click="minus">-</div> </template> </a-input-number> //限制直接输入时,test保持为a的整数倍 //输入值的最大最小值由组件本身限制,antd的规则是还原至最大/最小值 const change= () => { if ( test % a !== 0) { message.warning('test必须为a的整数倍'); test = 0;//还原至0(根据需求决定,也可还原至最小值a) } }; //实现增按钮整数倍递增+限制增按钮递增时最大值为max const add = () => { //此时的test并未递增成功,还是递增前的值 if (test + a> max) { //自定义的增减按钮组件本身并不会去限制,若大于max,只会显示告警样式,但不会还原 message.warning('test不能大于max'); } else { //需要注意的是,add方法完全自定义,也就是说递增依靠的是下面这一行代码 test =test + a; } }; //实现减按钮整数倍递减+限制减按钮递减时最小值为a const minus = () => { //若此时test已经等于a(小于a是以防万一) if ( test <= a ) { message.warning('test不能小于a'); } else { test =test - a; } }