input只能输入正数和小数

### 实现 Input 仅限输入正数和小数

为了确保 `el-input` 组件中的输入值仅为正数和小数，可以采用多种方法来实现这一需求。以下是几种常见的解决方案：

#### 方法一：使用 Vue 和 Element UI 结合正则表达式验证

通过监听 `@input` 事件并利用正则表达式过滤非法字符，可以在用户每次输入时立即进行验证。

<template>
  <el-input v-model="inputValue" @input="handleInput"></el-input>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(value) {
      // 正则表达式匹配正数和小数
      const reg = /^(?!0\d)(\d*\.?\d*)$/;
      if (reg.test(value) || value === '') {
        this.inputValue = value;
      } else {
        this.inputValue = '';
      }
    }
  }
};
</script>

这种方法能有效防止用户输入负号、多个小数点以及其他非数字字符[^1]。

#### 方法二：HTML 属性与 JavaScript 脚本结合

对于普通的 HTML `<input>` 元素，也可以借助原生属性配合简单的脚本来达到相同效果。

<input type="text" oninput="this.value=this.value.replace(/^(?!0\d)(\d*\.?\d*)$/, '$&')">

此方案适用于不依赖框架的场景，但灵活性稍逊于基于组件的方式[^3]。

#### 方法三：自定义指令增强表单控件功能

Vue 提供了创建自定义指令的能力，可用于封装复杂的逻辑以便重复使用。

// 定义全局指令
Vue.directive('positive-number', {
  inserted(el) {
    el.addEventListener('input', function () {
      let val = el.value;
      // 移除非合法字符
      el.value = val.replace(/^[^1-9]\d*\.\d*$|^\./, '');
    });
  }
});

<!-- 使用 -->
<el-input v-positive-number></el-input>

这种方式不仅简化了模板代码，还提高了代码复用率[^4]。