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('.');
    let precision = 0;
    // 如果存在小数
    if (dotPosition !== -1) {
      // 计算小数的位数：用整体长度 - . 的位置 - 1（因为 indexOf 是从0开始，所以需要再减去1）
      precision = valueString.length - dotPosition - 1;
    }
    return precision;
  },
},

获取当前值的小数位数和步长的小数位数较大的那一个：

computed: {
  // 计数器的小数位数
  numPrecision() {
    const { value, step } = this;
    // 获取步长的小数位数
    const stepPrecision = this.getPrecision(step);
    // 获取值和步长的小数位数中的较大值
    return Math.max(this.getPrecision(value), stepPrecision);
  },
}

3.2 递增/递减功能的实现

在实现递增、递减功能时，需要根据当前值和步长来去实现，并且需要注意到将小数转化为整数去加、减，避免出现运算的计算精度问题。

methods: {
  // 递增方法
  _increase(val, step) {
    if (typeof val !== 'number' && val !== undefined) return this.currentValue;
    // 根据获取到的小数位数计算转换为整数需要乘以多少，如果是1位小数需要乘以10，两位小数需要乘以100
    // 取10的 numPrecision 次幂
    const precisionFactor = Math.pow(10, this.numPrecision);
    return (precisionFactor * val + precisionFactor * step) / precisionFactor;
  },
  // 递减方法
  _decrease(val, step) {
    if (typeof val !== 'number' && val !== undefined) return this.currentValue;
    // 根据获取到的小数位数计算转换为整数需要乘以多少，如果是1位小数需要乘以10，两位小数需要乘以100
    // 取10的 numPrecision 次幂
    const precisionFactor = Math.pow(10, this.numPrecision);
    return (precisionFactor * val - precisionFactor * step) / precisionFactor;
  },
}

四. 严格步长的实现

4.1 严格步长的作用

严格步长是指只能输入步长的倍数，初始的传值也只能传步长的倍数，如果不是步长的倍数会自动转换为步长的倍数。

4.2 严格步长的计算

严格步长的计算思路：

用传入的值除以步长，获取到四舍五入的整数值，然后再乘以步长，则得到步长的倍数。

// 计算转换成整数需要的倍数
const stepPrecision = this.getPrecision(this.step);
const precisionFactor = Math.pow(10, stepPrecision);
// 用传入的值除以步长，获取到四舍五入的整数值，然后再乘以步长（计算过程中采用转换成整数的方式处理精度问题）
newVal = Math.round(newVal / this.step) * precisionFactor * this.step / precisionFactor;