elementui输入框保留两位小数-element input 只能输入数字保留小数点两位

在使用ElementUI时，我们经常需要对输入框中的数值进行格式化，特别是保留两位小数。本文将介绍如何实现这一功能，并提供多种解决方案。

解决方案概述

要在ElementUI的输入框中实现只能输入数字并保留两位小数的功能，可以通过以下几种方法：

使用正则表达式：在输入框的 input 事件中使用正则表达式对输入值进行过滤和格式化。
使用自定义指令：通过Vue的自定义指令来实现输入值的格式化。
使用计算属性：通过计算属性和 v-model 实现输入值的双向绑定和格式化。

方法一：使用正则表达式

代码示例

html

  
</p>


export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(value) {
      // 使用正则表达式匹配数字和最多两位小数
      this.inputValue = value.replace(/[^d.]/g, '').replace(/.{2,}/g, '.').replace(/^./g, '').replace(/.$/g, '').replace(/.{2,}/g, '.').replace(/(..*)./g, '$1');
      // 保留两位小数
      this.inputValue = parseFloat(this.inputValue).toFixed(2);
    }
  }
};


<p>

解释

@input="handleInput"：监听输入框的 input 事件，每次输入时调用 handleInput 方法。
handleInput 方法：
- 使用正则表达式 value.replace(/[^d.]/g, '') 去除所有非数字和小数点的字符。
- 使用 value.replace(/.{2,}/g, '.') 去除多余的连续小数点。
- 使用 value.replace(/^./g, '') 去除开头的小数点。
- 使用 value.replace(/.$/g, '') 去除结尾的小数点。
- 使用 parseFloat(this.inputValue).toFixed(2) 将输入值转换为浮点数并保留两位小数。

方法二：使用自定义指令

代码示例

html

  
</p>


export default {
  data() {
    return {
      inputValue: ''
    };
  },
  directives: {
    formatNumber: {
      inserted(el, binding, vnode) {
        el.addEventListener('input', (e) => {
          let value = e.target.value;
          value = value.replace(/[^d.]/g, '').replace(/.{2,}/g, '.').replace(/^./g, '').replace(/.$/g, '').replace(/.{2,}/g, '.').replace(/(..*)./g, '$1');
          value = parseFloat(value).toFixed(2);
          e.target.value = value;
          vnode.context[binding.expression] = value;
        });
      }
    }
  }
};


<p>

解释

v-format-number：自定义指令，用于格式化输入值。
directives 对象中定义了 formatNumber 指令：
- inserted 钩子函数在指令插入到DOM节点时执行。
- 在 input 事件中对输入值进行格式化，并更新输入框的值和组件的数据。

方法三：使用计算属性

代码示例

html

  
</p>


export default {
  data() {
    return {
      rawValue: ''
    };
  },
  computed: {
    formattedValue: {
      get() {
        return this.rawValue ? parseFloat(this.rawValue).toFixed(2) : '';
      },
      set(value) {
        this.rawValue = value.replace(/[^d.]/g, '').replace(/.{2,}/g, '.').replace(/^./g, '').replace(/.$/g, '').replace(/.{2,}/g, '.').replace(/(..*)./g, '$1');
      }
    }
  }
};


<p>