背景:今天写业务遇到一个业务需求,使用element组件的input输入框,要求用户输入金额时,有小数点的话,只能输入两位小数。本人看了各种文档,AI啥的都没找到合适的办法,没办法就只能造轮子了,偶然间,我发现了一个少见的API,叫oninput,跟element input的@input事件有一定的区别。
肯定有人说,可以使用element input自带的输入框长度限制那个,但是这个有要求,以下是官网截图信息说明
但是注意,这里有坑,使用这个输入框长度限制需要将type="text"才能生效,意味着输入的金额传给后端是字符串的,这肯定不行。另外肯定有人又说,叫后端转为number,假设这里后端给你转了,你还要在写一些方法来动态控制maxlength的长度,因为业务要求整数部分你长度输入没有限制,只限制小数点后两位,小数点这里不需要四舍五入,输入啥就是啥。所以想来想去都没找到好的解决办法,这时我想起了以前一个前辈写的代码,去git上查了一下,发现oninput这个属性
好家伙这个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('.')
}"
/>
最后效果:
有两位小数45后,小数点后面用户就无法在输入,前面整数部分依然可以输入
今天又学到一个技巧~~