el-input中只能输入数字和小数

element-ui中提供了一些校验的方法，但是均存在一些问题。如：

1. type=‘number’

但是此方法可以输入形式为 1-1-1的数据

2.el-input-number
此方法可以输入多个小数点

3. 使用正则表达式

<el-input  v-model='form.number' @input="(v)=>form.number=v.replace(/[^\d.]/g,'')" />

使用此方法也可以输入多个小数点

4. 封装一个方法

这些方法都不能满足我的需求，因此只能自己封装了一个方法来进行判断：

  <el-input
                  placeholder="请输入面积"
                  v-model="form.number"
                  @input="handleEdit('form','number')"
                  style="width: 85%;margin-right: 5px;"
                ></el-input>
   // 在 Input 值改变时触发
    handleEdit(val1, val2) {
      let number_only = this[val1][val2];
      // 先把非数字的都替换掉，除了数字和小数点
      number_only = number_only.replace(/[^\d.]/g, "");
      // 必须保证第一个为数字而不是小数点
      number_only = number_only.replace(/^\./g, "");
      // 保证只有出现一个小数点而没有多个小数点
      number_only = number_only.replace(/\.{2,}/g, ".");
      // 保证小数点只出现一次，而不能出现两次以上
      number_only = number_only
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      this[val1][val2] = number_only;
    },

经过后期测试，这个方法还是不行。虽然小数点只能输入一次，但是针对于‘-’，‘e’等特殊符还是可以输入，因此只能使用其他方法。

经过分析，发现只要在键盘输入的时候监听按键事件来处理这些特殊字符即可。
方法：

  <el-input
                  type="number"
                  v-model="form.payFee"
                  @keydown.native="dealInput"
                  style="width: 300px;margin-right: 5px;"
                ></el-input>元
 dealInput(e) {
      let key = e.key;
      if (key === "e" || key === "E" || key === "+" || key === "-") {
        e.returnValue = false;
        return false;
      }
      return true;
    },

配合css样式使用

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
  }