element-ui 之 InputNumber 组件的步长功能分析

此篇将分析 element-ui 的 InputNumber 组件中的步长功能的源代码。

一. 步长功能描述

步长是指接收一个 step 属性，以传入的 step 作为步长，每次递增或递减以一个 step 为单位进行。

二. 步长与严格步长的区别

在 InputNumber 组件中，如果只是设置了步长，没有设置严格步长，可以通过输入框输入的方式，输入不符合步长的数值。

如果一旦设置了严格步长，在输入框中输入不符合步长的数值时，会被计算成符合步长的数值，并且展示在输入框中。

例如：

如果输入框中的数字为2，步长也为2，如果在输入框中输入3，则严格步长模式则会把3计算成符合步长的数值4，展示在输入框中。

三. 步长功能的实现

在 InputNumber 组件的源代码中，步长实现的重点在于递增、递减功能的实现，递增、递减的实现需要注意数值精度的处理。

3.1 处理浮点数运算的计算精度问题

在 InputNumber 组件的源代码中，处理数值精度是通过由小数的加、减转化为整数的加、减来处理的，其中转化为整数的加、减需要计算出两点：

• 当前值的小数位数。
• 将当前值的小数位数与步长的小数位数做对比，用其中较大的值作为转换为整数的10的幂次方。

代码如下：
获取一个数的小数位数的方法：

methods: {
   
   
  // 获取一个数的小数位数
  getPrecision(value) {
   
   
    if (value === undefined) return 0;
    // 转换成字符串
    const valueString = value.toString();
    // 获取 . 的位置
    const dotPosition = valueString.indexOf('.'