ant-design-vue icon indicating copy to clipboard operation
ant-design-vue copied to clipboard

When InputNumber has a formatter attribute, it is not possible to enter a decimal with a negative zero point, such as -0.121

Open wolfidea opened this issue 2 years ago • 7 comments

  • [ ] I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.3.0-beta.4

Environment

vue3 ant-design-vue 3.2.15

Reproduction link

Edit on CodeSandbox

Steps to reproduce

InputNumber 存在formatter属性时候,输入 -0.1 ,会被格式化成0.1

What is expected?

期望存在formatter时,可以输入 -0.121

What is actually happening?

一直存在

wolfidea avatar Mar 16 '23 08:03 wolfidea

remove min prop

tangjinzhou avatar Mar 17 '23 02:03 tangjinzhou

和min prop无关。 可以看Reproduction link里面第一个input-number,原因是存在formatter属性,会执行setInputValue方法, setInputValue方法会即时格式化数据,NumberDecimal里面的 toString方法,会即时返回 this.origin,而 this.origin = String(value); 当输入-0的时候,这样就会即时返回String(-0),String(-0)的值是0,这样就会把负号给去除了。

暂时找到一个临时解决方法。 就是在自己的formatter方法里面拿input值,发现是-0,直接返回出来。 const formatter= (value, e) => { const { input } = e; if (input === '-0') { return input; }

// return value; return value.replace(/\B(?=(\d{3})+(?!\d))/g, ','); };

wolfidea avatar Mar 17 '23 02:03 wolfidea

这就是个示例代码问题吧,组件不用动

tangjinzhou avatar Mar 21 '23 06:03 tangjinzhou

可以看看ant design那边的例子,同样的输入行为是不一样的

zkwolf avatar Mar 21 '23 14:03 zkwolf

可以看看ant design那边的例子,同样的输入行为是不一样的

@zkwolf 也有问题 https://codesandbox.io/s/ge-shi-hua-zhan-shi-antd-5-3-2-forked-481kor?file=/demo.tsx 他那个文档示例是 defaultValue 改成 value 一样有问题

tangjinzhou avatar Mar 23 '23 03:03 tangjinzhou

@tangjinzhou 这里好像是因为 输入-0 的时候 decimalValue.toNumber() 将 -0 变成了 0 然后双向绑定,最后的显示的值变成了0,我想这样去解决这个问题你怎么看?

const getDecimalValue = (stringMode: boolean, decimalValue: DecimalClass) => {
  if (stringMode || decimalValue.isEmpty()) {
    return decimalValue.toString();
  }

  const strVal = decimalValue.toString(false);
  if (/^-0$/.test(strVal)) {
    return strVal;
  }

  return decimalValue.toNumber();
};

CCherry07 avatar Mar 23 '23 12:03 CCherry07

@wolfidea 您目前可以考虑使用 stringMode prop 处理你的问题 image

CCherry07 avatar Mar 24 '23 15:03 CCherry07