Vue input表单number类型保留两位小数，并防止输入多个小数点解决方法，自定义NumberInput组件

背景：Vue开发移动端应用时，难免用到表单输入，比如金额。

需求：这时就需要吊起移动端数字键盘，input的type就必须设置成number，当然tel类型也可以，但是无法输入小数点。当然如果精力允许，你也可以自定义数字键盘是最好的，网上也有很多Vue数字键盘组件。

踩坑：一但用了input[type=number]类型有很多的坑。

1. vue在申明表单model的时候必须是整形，要不然一堆红报错。
2. maxlength属性不生效了，无法限制表单输入长度。
3. 可以多次输入小数点，其实这个model已经变成空值了，这个是最坑的。
4. 无法保留指定小数位数。
5. 无法限制最大值，最小值。

思路一：用原生oninput函数实现输入正则替换，自定义函数替换字符。（会破坏vue统一性，不推荐）

思路二：用vue的@nput函数实现输入正则替换，自定义函数替换字符。（实现麻烦，不推荐）

思路三：用vue的变量监听函数。（输入某些值情况下不会被触发，不推荐）

watch:{
    'formData.amount':function (newVal,oldVal) {
      // 解决数字键盘可以输入输入多个小数点问题
      if(newVal==='' && oldVal.toString().indexOf('.')>0){
        this.formData.amount = oldVal;
        return ;
      }
      // 保留两位小数
      if(newVal){
        newVal = newVal.toString();
        var pointIndex =  newVal.indexOf('.');
        if(pointIndex>0 && (newVal.length - pointIndex)>3){
          this.formData.amount = oldVal;
          return ;
        }
      }
      // 最大值
      if(newVal>999999){
        this.formData.amount = oldVal;
        return ;
      }
    }
  }

上面的方法解决了，可以多次输入小数点问题，和保留小数位数，还有限制大小都可以在这里实现，因为监听函数可以获取到历史输入值，很方便还原，不过在输入点的时候不会被触发，所以不是很理想。

 

思路四：用vue的computed函数，实现父组件和子组件双向通信。（为了方便大家使用我单独封装了一个插件MyNumberInput.vue，推荐，推荐，推荐，完美）

path：@/components/Plugin/Form/MyNumberInput.vue

组件使用：

1. 导入：

import MyNumberInput from '@/components/Plugin/Form/MyNumberInput';

2. 注册：

export default {
    components: {
       MyNumberInput //注册 
    },
    data() {
    },
    mounted() {
    },
}

3. 视图：

属性说明：

1. point 保留小数位数 ，默认0
2. max 最大数，默认无限
3. placeholder 输入提示 默认空
4. v-model 绑定数据对象

解决问题：

1. 解决首位直接输入 '0开头的数字'问题
2. 解决数字键盘输入多个小数点问题
3. 解决开始就输入点问题
4. 解决保留两位小数问题
5. 解决输入最大值问题
6. 解决了默认弹出数字键盘问题