要实现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补齐两位小数的效果

el-input显示框失焦显示padEnd补齐两位小数

原文地址: https://www.cveoy.top/t/topic/ihxT 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录