Element-ui中InputNumber 将日文全角输入法的数字转化为半角数字

发现问题

这周测试人员在测试的时候，反映到使用InputNumber组件输入数字时，会出现输入不进去的情况。

这奇怪了， 我这里明明是好用的，她那里为什么不好使呢？考虑了一下，考虑到是对日项目，测试人员很有可能是使用的日文输入进行入力，然后输入的是全角的数字，InputNumber 组件将其识别为非number类型，那么自然就出现输入不进去的情况。

参考如下两种数字的区别：
半角123456789
全角１２３４５６７８９

补充一点
全角模式：输入一个字符占用2个字符， 半角模式：输入一个字符占用1个字符

修改Element-UI 的 InputNumber 计数器组件

首先需要将Element-UI的源码下载至本地

git clone https://github.com/ElemeFE/element.git

完成之后，打开命令行 cd 到刚刚下载的element 文件夹下面，直接执行npm run dev

访问 http://localhost:8085/ ，出现如下画面

然后，用编译器打开element\packages\input-number\src 中的 input-number.vue

在methods 里面，创建一个toCharCode(str)方法

toCharCode(str) {
  // 原理就是将日文的全角数字，通过改变编码字符而转成InputNumber 能够识别的数字
  var tmp = '';
  for (var i = 0; i < str.length; i++) {
    if (str.charCodeAt(i) > 65248 && str.charCodeAt(i) < 65375) {
      tmp += String.fromCharCode(str.charCodeAt(i) - 65248);
    } else {
      tmp += String.fromCharCode(str.charCodeAt(i));
    }
  }
  return tmp;
}

然后找到 computed 中的 displayValue() 方法 修改至

displayValue() {
 if (this.userInput !== null) {
 	// 下方调用一下toCharCode（str）方法
 	// 然后把方法处理过后return的值，重新赋给userInput
    this.userInput = this.toCharCode(this.userInput);
    return this.userInput;
  }
  let currentValue = this.currentValue;

  if (typeof currentValue === 'number') {
    if (this.stepStrictly) {
      const stepPrecision = this.getPrecision(this.step);
      const precisionFactor = Math.pow(10, stepPrecision);
      currentValue = Math.round(currentValue / this.step) * precisionFactor * this.step / precisionFactor;
    }

    if (this.precision !== undefined) {
      currentValue = currentValue.toFixed(this.precision);
    }
  }

  return currentValue;
}

保存之后访问InputNumber 计数器页面http://localhost:8085/#/zh-CN/component/input-number查看效果

效果

未修改前：

修改后：

确认组件修改没有问题之后，打开控制台，cd到 element\packages 下，执行命令 npm run dist,执行之后如下画面

同时在element文件夹中，生成了一个lib文件，把这个文件复制替换到
你自己的项目名\node_modules\element-ui\lib
然后 重新运行一下你的项目就可以解决这个问题了。