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

官方文档：InputNumber

• 要求：输入框内的值test①必须为a的整数倍（且增减按钮以a整数倍增减）②最小值为a③最大值为max④允许手动输入（且手动输入也需判断）
  

  <a-input-numberv-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）}};//实现增按钮整数倍递增+限制增按钮递增时最大值为maxconst add = () => {//此时的test并未递增成功，还是递增前的值if (test + a> max) {//自定义的增减按钮组件本身并不会去限制，若大于max，只会显示告警样式，但不会还原message.warning('test不能大于max');} else {//需要注意的是，add方法完全自定义，也就是说递增依靠的是下面这一行代码test =test + a;}};//实现减按钮整数倍递减+限制减按钮递减时最小值为aconst  minus = () => {//若此时test已经等于a（小于a是以防万一）if ( test <= a ) { message.warning('test不能小于a');}else {test =test - a;}}
  

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！