feat: 增加单测用例+更改属性名

packages/amis-ui/src/components/NumberInput.tsx

@@ -81,7 +81,7 @@ export interface NumberProps extends ThemeProps {
   /**
    * 用来开启百分号的展示形式，搭配suffix使用
    */
-  showPercent?: boolean;
+  showAsPercent?: boolean;
 
   /**
    * 是否在清空内容时从数据域中删除该表单项对应的值
@@ -254,9 +254,9 @@ export class NumberInput extends React.Component<NumberProps, NumberState> {
   handleChange(value: any) {
     const {min, max, step, resetValue, clearValueOnEmpty, onChange} =
       this.props;
-    let {suffix, precision, showPercent} = this.props;
+    let {suffix, precision, showAsPercent} = this.props;
     //在显示百分号情况下，需先将数值恢复到实际value值
-    if (showPercent && suffix == '%') {
+    if (showAsPercent && suffix == '%') {
       value = value / 100;
       precision = (precision || 0) + 2;
     }
@@ -358,7 +358,7 @@ export class NumberInput extends React.Component<NumberProps, NumberState> {
       showSteps,
       formatter,
       suffix,
-      showPercent,
+      showAsPercent,
       parser,
       borderMode,
       readOnly,
@@ -372,9 +372,9 @@ export class NumberInput extends React.Component<NumberProps, NumberState> {
     } = this.props;
 
     let {value} = this.props;
-    //需要展示百分号的情况下，数值乘100显示
-    if (showPercent && suffix == '%' && value) {
-      value = ((value as number) * 100)?.toFixed(precision);
+    //需要展示百分号的情况下,数值乘100显示,注意精度丢失问题
+    if (showAsPercent && suffix == '%' && value) {
+      value = parseFloat((Number(value) * 100).toPrecision(16));
     }
     const precisionProps: any = {
       precision: NumberInput.normalizePrecision(precision, step)

packages/amis/__tests__/renderers/Form/number.test.tsx

@@ -356,3 +356,17 @@ test('Renderer:number with static', async () => {
   expect(stringValInput.value).toEqual('123');
   expect(numberValInput.value).toEqual('123');
 });
+
+test('Renderer:number with showAsPercent', async () => {
+  const {input, container} = await setup({
+    suffix: '%',
+    showAsPercent: true,
+    value: '1.123',
+    precision: 3
+  });
+
+  expect(input.value).toEqual('112.3%');
+
+  replaceReactAriaIds(container);
+  expect(container).toMatchSnapshot();
+});

packages/amis/src/renderers/Form/InputNumber.tsx

@@ -105,9 +105,9 @@ export interface NumberControlSchema extends FormBaseControlSchema {
   displayMode?: 'base' | 'enhance';
 
   /**
-   * 用来开启百分号的展示形式，搭配suffix使用
+   * 用来开启百分号的展示形式
    */
-  showPercent?: boolean;
+  showAsPercent?: boolean;
 }
 
 export interface NumberProps extends FormControlProps {
@@ -171,7 +171,7 @@ export interface NumberProps extends FormControlProps {
   /**
    * 用来开启百分号的展示形式，搭配suffix使用
    */
-  showPercent?: boolean;
+  showAsPercent?: boolean;
 }
 
 interface NumberState {
@@ -256,10 +256,10 @@ export default class NumberControl extends React.Component<
   }
 
   formatNumber(value: any, setPrinstine = false) {
-    const {showPercent, suffix, step, big, setPrinstineValue} = this.props;
+    const {showAsPercent, suffix, step, big, setPrinstineValue} = this.props;
     let {precision} = this.props;
     //展示百分号情况下，需要精度加2后，才能保持跟配置一致
-    if (showPercent && suffix === '%') {
+    if (showAsPercent && suffix === '%') {
       precision = (precision || 0) + 2;
     }
     const unit = this.getUnit();
@@ -483,7 +483,7 @@ export default class NumberControl extends React.Component<
       id,
       env,
       name,
-      showPercent,
+      showAsPercent,
       testIdBuilder
     } = this.props;
     const {unit} = this.state;
@@ -572,7 +572,7 @@ export default class NumberControl extends React.Component<
           borderMode={borderMode}
           readOnly={readOnly}
           suffix={suffix}
-          showPercent={showPercent}
+          showAsPercent={showAsPercent}
           onFocus={() => this.dispatchEvent('focus')}
           onBlur={() => this.dispatchEvent('blur')}
           keyboard={keyboard}