el-input显示框失焦显示padEnd补齐两位小数
要实现el-input显示框失焦时显示padEnd补齐两位小数,可以使用Vue的watch属性监听el-input的失焦事件,并在事件处理函数中对输入的值进行处理。
首先,在el-input组件上添加失焦事件处理函数:
<el-input v-model="inputValue" @blur="handleBlur"></el-input>
然后,在Vue实例中定义inputValue和处理失焦事件的方法:
new Vue({
data() {
return {
inputValue: ''
};
},
watch: {
inputValue(newValue) {
// 判断输入的值是否为数字
if (!isNaN(newValue)) {
// 使用padEnd方法补齐两位小数
this.inputValue = parseFloat(newValue).toFixed(2).padEnd(5, '0');
}
}
},
methods: {
handleBlur() {
// 失焦事件处理函数
// 判断输入的值是否为数字
if (!isNaN(this.inputValue)) {
// 使用padEnd方法补齐两位小数
this.inputValue = parseFloat(this.inputValue).toFixed(2).padEnd(5, '0');
}
}
}
});
这样,当el-input失焦时,会触发handleBlur方法,方法中对输入的值进行处理,使用toFixed(2)保留两位小数,然后使用padEnd方法补齐5位长度,不足的位置用'0'填充。最后,将处理后的值赋给inputValue,实现失焦显示padEnd补齐两位小数的效果
原文地址: https://www.cveoy.top/t/topic/ihxT 著作权归作者所有。请勿转载和采集!