iView Input控件中输入小数提示“请输入有效值。两个最接近的有效值分别为*和*”

在Vue中使用iView UI的Input控件时，在type="numebr"并输入小数的时候，会提示“请输入有效值。两个最接近的有效值分别为a和b”的问题，其中a和b是所输入小数的上下两个整数。有一些提到的方法是使用step控制，但针对iView的Input无效。如果是使用iView来解决，那么可以通过换成InputNumber控件来解决问题。

在Vue中如下使用iView的Input控件，比如在x.vue的component中

<template>
    <div>
        ...
        <Input type="number" placeholder="Input a decimal" v-model="inputData" id="inputDecimal"/>
        ...
    </div>
</template>

<script>
    export default {
      name: 'X',
      data () {
          return {
            inputData: 0  
          };
      },
      ...
    };
</script>

运行后会出现"请输入有效值。两个最接近的有效值分别为*和*“提示，虽然也不影响Form的提交，但看着很奇怪，如下图

报错的原因从现象上看，是iView的Input控件没有支持Html5的step属性。因为即便在Input标签内加入step="0.01"的属性，但从最终自动生成html来看，step属性被丢弃。

要解决这个问题，目前找到合适的方式，就是使用iView的InputNumber替代Input组件

<InputNumber type="number" placeholder="Input a decimal" v-model="inputData" id="inputDecimal" :step="0.01"></InputNumber

这里就可以使用:step来定义精度了。

另外，有一个细节点需要注意，因为使用InputNumber标签替代Input标签，原有的部分会出现失效，比如宽度，所以需要单独给InputNumber标签定义css样式。