vue elementui el-input 正则验证，限制只能输入数字和小数

在Vue中使用Element UI的el-input组件进行正则表达式验证，以确保只能输入数字和小数，可以通过@input事件监听输入内容，并使用正则表达式来验证和处理输入。

以下是一个简单的例子：

<template>
  <el-input
    v-model="inputValue"
    @input="handleInput"
  ></el-input>
</template>
 
<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(value) {
      // 使用正则表达式匹配数字和小数点
      const regex = /^(\d+)?(\.\d+)?$/;
 
      // 如果输入值不符合正则表达式，则将其重置为上一个合法的值
      if (!regex.test(value)) {
        this.inputValue = this.inputValue.substring(0, this.inputValue.length - 1);
      }
    }
  }
};
</script>

在这个例子中，handleInput方法会在每次输入时被触发。如果输入的内容不符合正则表达式/^(\d+)?(\.\d+)?$/（即不是数字和可选的小数点后跟数字），则会将输入的内容截断到上一个合法的值。这样就可以确保用户只能输入数字和小数。