场景:
–要求1:输入框只能输入数字,可以使正数、负数、0,小数点最多保留两位。
–要求2:不需要自动补齐小数点,也不需要自动四舍五入。
element-ui的数字输入框el-input-number只能满足要求1,所以在原有的基础上做修改即可;
下图的第一个输入框就是没改动的数字输入框;第二个是修改后的满足需求1和需求2;
以下代码可以直接复制使用!
<template><div><!-- 默认数字输入会自动补齐小数点 还会自动四舍五入 --><el-input-number v-model="num5" :precision="2" :step="0.01" :max="10" placeholder="0正负数 最多两位小数"></el-input-number><!-- 去掉加减按钮 去掉自动补齐小数点属性precision 去掉四舍五入 --><el-input-number v-model="num6" :step="0.01" placeholder="0正负数 最多两位小数" class="num_input" @input.native="changeInputPt2($event)"></el-input-number></div>
</template><script>
export default {data () {return {num5: undefined,num6: undefined}},methods: {changeInputPt2 (e) {console.log(e.target.value)if ((e.target.value.indexOf('.') >= 0)) {e.target.value = e.target.value.substring(0, e.target.value.indexOf('.') + 3) // 这里采用截取 既可以限制第三位小数输入 也解决了数字输入框默认四舍五入问题}console.log(e.target.value)}}
}
</script><style lang="less" scoped>
.num_input {/deep/.el-input-number__decrease,/deep/.el-input-number__increase {display: none !important;}/deep/.el-input__inner {padding: 0 !important;}
}
</style>