场景:
–要求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>