需求:用户填写输入框,存在小数点只能保留两位小数

56 阅读1分钟

背景:今天写业务遇到一个业务需求,使用element组件的input输入框,要求用户输入金额时,有小数点的话,只能输入两位小数。本人看了各种文档,AI啥的都没找到合适的办法,没办法就只能造轮子了,偶然间,我发现了一个少见的API,叫oninput,跟element input的@input事件有一定的区别。

肯定有人说,可以使用element input自带的输入框长度限制那个,但是这个有要求,以下是官网截图信息说明

image.png

但是注意,这里有坑,使用这个输入框长度限制需要将type="text"才能生效,意味着输入的金额传给后端是字符串的,这肯定不行。另外肯定有人又说,叫后端转为number,假设这里后端给你转了,你还要在写一些方法来动态控制maxlength的长度,因为业务要求整数部分你长度输入没有限制,只限制小数点后两位,小数点这里不需要四舍五入,输入啥就是啥。所以想来想去都没找到好的解决办法,这时我想起了以前一个前辈写的代码,去git上查了一下,发现oninput这个属性

image.png 好家伙这个oninput还可以这样写,于是我就照着这个思路去写,没想到就实现了

<el-input
  v-model.trim="scope.row.billing"
  type="number"
  placeholder="请输入本次开票金额"
  oninput="if(value.includes('.')) {   //这个value就是输入框的值
    let arr = value.split('.')
    arr[1] = arr[1].slice(0,2)
    value = arr.join('.')
  }"
/>

最后效果:

image.png

有两位小数45后,小数点后面用户就无法在输入,前面整数部分依然可以输入

今天又学到一个技巧~~