el-input为number类型做输入长度限制

本来我想偷个懒,百度复制一下,发现热门那几个文章真的瞎掰

那我直接代码了,估计有和我一样懒的想复制就能用的

<el-input
          prefix-icon="el-icon-mobile"
          placeholder="请输入手机号"
          @input="limitPhoneNum"
          type="number"
          v-model="codeForm.phoneNum"
          autocomplete="off"
></el-input>
....
 limitPhoneNum(value) {
   if (value.toString().length > 11) {
     this.codeForm.phoneNum = this.codeForm.phoneNum.toString().slice(0, 11)
   }
   console.log(value);
    },

经过评论@love明镜的补充:

type给予number类型后依然可以输入‘+ - e’字符,所以需要更准确的进行拦截
所以新增了keydown的监听,在这里感谢@love明镜的补充

<el-input
          prefix-icon="el-icon-mobile"
          placeholder="请输入手机号"
          @input="limitPhoneNum"
          @keydown.native="inputKeyDown"
          type="number"
          v-model="codeForm.phoneNum"
          autocomplete="off"
></el-input>
....
	 limitPhoneNum(value) {
	   if (value.toString().length > 11) {
	     this.codeForm.phoneNum = this.codeForm.phoneNum.toString().slice(0, 11)
	   }
	   console.log(value);
     },
     inputKeyDown(event) {
      console.log('event', event);
      const { key } = event;
      const filterValue = ['e', '+', '-', '.'];
      if (filterValue.includes(key)) {
        event.returnValue = false;
        return false;
      }
      return true;
     },
  • 9
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
### 回答1: el-input-number长度限制是指在输入数字时,可以限制输入数字的位数,例如限制只能输入最多5位数字。这个限制可以通过设置min和max属性来实现。同时,还可以通过设置step属性来控制每次增加或减少的数字大小。 ### 回答2: el-input-numberElement UI中的一个数字输入框组件,可以用于输入数字类型的值。在使用el-input-number时,可以通过设置min和max属性来限制输入的数字的最小值和最大值,超出这个范围的数字将无法输入。 除了限制数字的范围外,el-input-number还可以设置step属性来指定每次增加或减少的步长,默认为1。比如设置step为0.5,每次点击加号或减号按钮时,数字将增加或减少0.5。这样可以对输入的数字进行更细粒度的控制。 另外,el-input-number还提供了precision属性,用于设置输入数字时的精确度。默认的精确度为0,即只能输入整数。若需要输入小数,可将precision设置为大于0的值,表示小数点后的位数。 对于el-input-number中的输入长度限制,可以使用maxlength属性来指定最大的可输入字符数。这意味着虽然el-input-number输入数字的组件,但可以设置最大字符长度,可以在某些场景下起到限制输入数字长度的作用。maxlength属性同样适用于数字输入框组件。 综上所述,el-input-number组件的长度限制主要通过设置min、max、step和maxlength等属性来控制。通过这些属性的设置,可以实现对输入数字范围、精确度和字符长度限制,以满足具体的业务需求。 ### 回答3: el-input-numberElement UI库中的一个组件,用于输入数字值。它可以通过设置属性来进行长度限制。首先,可以通过设置min和max属性来定义允许输入的最小值和最大值,这样可以限制输入的范围。例如,如果将min属性设置为0,max属性设置为100,那么用户只能输入0到100之间的数字。 此外,el-input-number还可以通过设置precision属性来限制输入数字的小数位数。precision属性接受一个整数值,表示允许的小数位数。例如,如果将precision属性设置为2,那么用户只能输入至多两位小数的数字。 除了以上属性,el-input-number还可以通过设置maxlength属性来限制输入数字的最大长度。maxlength属性接受一个整数值,表示允许输入的最大位数。例如,如果将maxlength属性设置为3,那么用户只能输入至多3位数的数字。 需要注意的是,以上属性的长度限制是基于纯数字的位数,不计算小数点和负号的长度。所以,设置上述属性时,应该根据自己的需求来进行调整,以满足对数字输入长度要求。 综上所述,el-input-number可以通过设置min、max、precision和maxlength属性来进行长度限制,可以限制输入的范围、小数位数和最大位数。这些属性的设置可以有效地控制用户对数字的输入长度

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值