【vue3+antd】实现InputNumber数字输入框复杂约束

官方文档：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;
    	}
    }