feat: inputNumber add prefix slot

2022-03-01 15:16:36 +08:00 · 2022-03-01 15:16:36 +08:00 · efea6b000e
parent 85767de396
commit efea6b000e
10 changed files with 218 additions and 31 deletions
--- a/components/input-number/tests/snapshots/demo.test.js.snap
+++ b/components/input-number/tests/snapshots/demo.test.js.snap
@ -122,15 +122,21 @@ exports[`renders ./components/input-number/demo/disabled.vue correctly 1`] = `
 `;

 exports[`renders ./components/input-number/demo/formatter.vue correctly 1`] = `
-<div>
-  <div class="ant-input-number">
-    <div class="ant-input-number-handler-wrap"><span unselectable="on" role="button" aria-label="Increase Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-up"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg focusable="false" class="" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span unselectable="on" role="button" aria-label="Decrease Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-down"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
-    <div class="ant-input-number-input-wrap"><input autocomplete="off" role="spinbutton" aria-valuenow="1000" step="1" class="ant-input-number-input"></div>
+<div class="ant-space ant-space-horizontal ant-space-align-center">
+  <div class="ant-space-item" style="margin-right: 8px;">
+    <div class="ant-input-number">
+      <div class="ant-input-number-handler-wrap"><span unselectable="on" role="button" aria-label="Increase Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-up"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg focusable="false" class="" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span unselectable="on" role="button" aria-label="Decrease Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-down"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
+      <div class="ant-input-number-input-wrap"><input autocomplete="off" role="spinbutton" aria-valuenow="1000" step="1" class="ant-input-number-input"></div>
+    </div>
  </div>
-  <div class="ant-input-number">
-    <div class="ant-input-number-handler-wrap"><span unselectable="on" role="button" aria-label="Increase Value" aria-disabled="true" class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg focusable="false" class="" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span unselectable="on" role="button" aria-label="Decrease Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-down"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
-    <div class="ant-input-number-input-wrap"><input autocomplete="off" role="spinbutton" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" step="1" class="ant-input-number-input"></div>
+  <!---->
+  <div class="ant-space-item">
+    <div class="ant-input-number">
+      <div class="ant-input-number-handler-wrap"><span unselectable="on" role="button" aria-label="Increase Value" aria-disabled="true" class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg focusable="false" class="" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span unselectable="on" role="button" aria-label="Decrease Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-down"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
+      <div class="ant-input-number-input-wrap"><input autocomplete="off" role="spinbutton" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" step="1" class="ant-input-number-input"></div>
+    </div>
  </div>
+  <!---->
 </div>
 `;

@ -164,19 +170,55 @@ exports[`renders ./components/input-number/demo/out-of-range.vue correctly 1`] =
 </div>
 `;

-exports[`renders ./components/input-number/demo/size.vue correctly 1`] = `
-<div>
-  <div class="ant-input-number ant-input-number-lg">
-    <div class="ant-input-number-handler-wrap"><span unselectable="on" role="button" aria-label="Increase Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-up"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg focusable="false" class="" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span unselectable="on" role="button" aria-label="Decrease Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-down"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
-    <div class="ant-input-number-input-wrap"><input autocomplete="off" role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" step="1" class="ant-input-number-input"></div>
-  </div>
+exports[`renders ./components/input-number/demo/prefix.vue correctly 1`] = `
+<div class="ant-input-number-affix-wrapper" style="width: 100%;"><span class="ant-input-number-prefix">￥</span>
  <div class="ant-input-number">
    <div class="ant-input-number-handler-wrap"><span unselectable="on" role="button" aria-label="Increase Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-up"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg focusable="false" class="" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span unselectable="on" role="button" aria-label="Decrease Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-down"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
-    <div class="ant-input-number-input-wrap"><input autocomplete="off" role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" step="1" class="ant-input-number-input"></div>
+    <div class="ant-input-number-input-wrap"><input autocomplete="off" role="spinbutton" aria-valuenow="1" step="1" class="ant-input-number-input"></div>
  </div>
-  <div class="ant-input-number ant-input-number-sm">
+</div><br><br>
+<div class="ant-input-number-group-wrapper" style="width: 100%;">
+  <div class="ant-input-number-wrapper ant-input-number-group">
+    <div class="ant-input-number-group-addon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></div>
+    <div class="ant-input-number-affix-wrapper" style="width: 100%;"><span class="ant-input-number-prefix">￥</span>
+      <div class="ant-input-number">
+        <div class="ant-input-number-handler-wrap"><span unselectable="on" role="button" aria-label="Increase Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-up"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg focusable="false" class="" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span unselectable="on" role="button" aria-label="Decrease Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-down"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
+        <div class="ant-input-number-input-wrap"><input autocomplete="off" role="spinbutton" aria-valuenow="2" step="1" class="ant-input-number-input"></div>
+      </div>
+    </div>
+    <!---->
+  </div>
+</div><br><br>
+<div class="ant-input-number-affix-wrapper ant-input-number-affix-wrapper-disabled" style="width: 100%;"><span class="ant-input-number-prefix">￥</span>
+  <div class="ant-input-number ant-input-number-disabled">
    <div class="ant-input-number-handler-wrap"><span unselectable="on" role="button" aria-label="Increase Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-up"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg focusable="false" class="" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span unselectable="on" role="button" aria-label="Decrease Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-down"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
-    <div class="ant-input-number-input-wrap"><input autocomplete="off" role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" step="1" class="ant-input-number-input"></div>
+    <div class="ant-input-number-input-wrap"><input autocomplete="off" role="spinbutton" aria-valuenow="3" step="1" class="ant-input-number-input" disabled=""></div>
  </div>
 </div>
 `;
+
+exports[`renders ./components/input-number/demo/size.vue correctly 1`] = `
+<div class="ant-space ant-space-horizontal ant-space-align-center">
+  <div class="ant-space-item" style="margin-right: 8px;">
+    <div class="ant-input-number ant-input-number-lg">
+      <div class="ant-input-number-handler-wrap"><span unselectable="on" role="button" aria-label="Increase Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-up"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg focusable="false" class="" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span unselectable="on" role="button" aria-label="Decrease Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-down"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
+      <div class="ant-input-number-input-wrap"><input autocomplete="off" role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" step="1" class="ant-input-number-input"></div>
+    </div>
+  </div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 8px;">
+    <div class="ant-input-number">
+      <div class="ant-input-number-handler-wrap"><span unselectable="on" role="button" aria-label="Increase Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-up"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg focusable="false" class="" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span unselectable="on" role="button" aria-label="Decrease Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-down"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
+      <div class="ant-input-number-input-wrap"><input autocomplete="off" role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" step="1" class="ant-input-number-input"></div>
+    </div>
+  </div>
+  <!---->
+  <div class="ant-space-item">
+    <div class="ant-input-number ant-input-number-sm">
+      <div class="ant-input-number-handler-wrap"><span unselectable="on" role="button" aria-label="Increase Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-up"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg focusable="false" class="" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span unselectable="on" role="button" aria-label="Decrease Value" aria-disabled="false" class="ant-input-number-handler ant-input-number-handler-down"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
+      <div class="ant-input-number-input-wrap"><input autocomplete="off" role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" step="1" class="ant-input-number-input"></div>
+    </div>
+  </div>
+  <!---->
+</div>
+`;
--- a/components/input-number/demo/formatter.vue
+++ b/components/input-number/demo/formatter.vue
@ -17,7 +17,7 @@ Display value within it's situation with `formatter`, and we usually use `parser
 </docs>

 <template>
-  <div>
+  <a-space>
    <a-input-number
      v-model:value="value1"
      :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
@ -30,7 +30,7 @@ Display value within it's situation with `formatter`, and we usually use `parser
      :formatter="value => `${value}%`"
      :parser="value => value.replace('%', '')"
    />
-  </div>
+  </a-space>
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
--- a/components/input-number/demo/index.vue
+++ b/components/input-number/demo/index.vue
@ -9,6 +9,7 @@
    <keyboardVue />
    <outOfRangeVue />
    <borderlessVue />
+    <prefixVue />
  </demo-sort>
 </template>
 <script lang="ts">
@ -21,6 +22,7 @@ import addonVue from './addon.vue';
 import borderlessVue from './borderless.vue';
 import keyboardVue from './keyboard.vue';
 import outOfRangeVue from './out-of-range.vue';
+import prefixVue from './prefix.vue';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 import { defineComponent } from 'vue';
@ -29,6 +31,7 @@ export default defineComponent({
  CN,
  US,
  components: {
+    prefixVue,
    Basic,
    Disabled,
    Digit,
--- a/components/input-number/demo/prefix.vue
+++ b/components/input-number/demo/prefix.vue
@ -0,0 +1,49 @@
+<docs>
+---
+order: 7
+title:
+  zh-CN: 前缀
+  en-US: Prefix
+---
+
+## zh-CN
+
+在输入框上添加前缀图标。
+
+## en-US
+
+Add a prefix inside input.
+
+</docs>
+
+<template>
+  <a-input-number v-model:value="value1" prefix="￥" style="width: 100%" />
+  <br />
+  <br />
+  <a-input-number v-model:value="value2" prefix="￥" style="width: 100%">
+    <template #addonBefore>
+      <UserOutlined />
+    </template>
+  </a-input-number>
+  <br />
+  <br />
+  <a-input-number v-model:value="value3" prefix="￥" disabled style="width: 100%" />
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { UserOutlined } from '@ant-design/icons-vue';
+export default defineComponent({
+  components: { UserOutlined },
+  setup() {
+    const value1 = ref<number>(1);
+    const value2 = ref<number>(2);
+    const value3 = ref<number>(3);
+
+    return {
+      value1,
+      value2,
+      value3,
+    };
+  },
+});
+</script>
--- a/components/input-number/demo/size.vue
+++ b/components/input-number/demo/size.vue
@ -17,11 +17,11 @@ There are three sizes available to a numeric input box. By default, the size is
 </docs>

 <template>
-  <div>
+  <a-space>
    <a-input-number v-model:value="value1" size="large" :min="1" :max="100000" />
    <a-input-number v-model:value="value2" :min="1" :max="100000" />
    <a-input-number v-model:value="value3" size="small" :min="1" :max="100000" />
-  </div>
+  </a-space>
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
@ -39,8 +39,3 @@ export default defineComponent({
  },
 });
 </script>
-<style scoped>
-.ant-input-number {
-  margin-right: 10px;
-}
-</style>
--- a/components/input-number/index.en-US.md
+++ b/components/input-number/index.en-US.md
@ -18,7 +18,7 @@ When a numeric value needs to be provided.
 | autofocus | get focus when component mounted | boolean | false |
 | defaultValue | initial value | number |  |
 | disabled | disable the input | boolean | false |
-| formatter | Specifies the format of the value presented | function(value: number \| string): string | - |
+| formatter | Specifies the format of the value presented | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 3.0 |
 | max | max value | number | Infinity |
 | min | min value | number | -Infinity |
 | parser | Specifies the value extracted from formatter | function( string): number | - |
@ -33,6 +33,8 @@ When a numeric value needs to be provided.
 | controls | Whether to show `+-` controls | boolean | true | 3.0 |
 | keyboard | If enable keyboard behavior | boolean | true | 3.0 |
 | stringMode | Set value as string to support high precision decimals. Will return string value by `change` | boolean | false | 3.0 |
+| controls | Whether to show `+-` controls | boolean | true | 3.0 |
+| prefix | The prefix icon for the Input | slot | - | 3.0 |

 ### events

--- a/components/input-number/index.tsx
+++ b/components/input-number/index.tsx
@ -21,6 +21,7 @@ export const inputNumberProps = {
  type: String,
  addonBefore: PropTypes.any,
  addonAfter: PropTypes.any,
+  prefix: PropTypes.any,
  'update:value': baseInputNumberProps.onChange,
 };

@ -31,11 +32,12 @@ const InputNumber = defineComponent({
  inheritAttrs: false,
  props: inputNumberProps,
  emits: ['focus', 'blur', 'change', 'input', 'update:value'],
-  slots: ['addonBefore', 'addonAfter'],
+  slots: ['addonBefore', 'addonAfter', 'prefix'],
  setup(props, { emit, expose, attrs, slots }) {
    const formItemContext = useInjectFormItemContext();
    const { prefixCls, size, direction } = useConfigInject('input-number', props);
    const mergedValue = ref(props.value === undefined ? props.defaultValue : props.value);
+    const focused = ref(false);
    watch(
      () => props.value,
      () => {
@ -62,10 +64,12 @@ const InputNumber = defineComponent({
      formItemContext.onFieldChange();
    };
    const handleBlur = () => {
+      focused.value = false;
      emit('blur');
      formItemContext.onFieldBlur();
    };
    const handleFocus = () => {
+      focused.value = true;
      emit('focus');
    };
    onMounted(() => {
@ -85,6 +89,7 @@ const InputNumber = defineComponent({
        style,
        addonBefore = slots.addonBefore?.(),
        addonAfter = slots.addonAfter?.(),
+        prefix = slots.prefix?.(),
        ...others
      } = { ...(attrs as HTMLAttributes), ...props };

@ -102,7 +107,7 @@ const InputNumber = defineComponent({
        className,
      );

-      const element = (
+      let element = (
        <VcInputNumber
          {...omit(others, ['size', 'defaultValue'])}
          ref={inputNumberRef}
@ -119,8 +124,32 @@ const InputNumber = defineComponent({
          }}
        />
      );
+      const hasAddon = isValidValue(addonBefore) || isValidValue(addonAfter);
+      if (isValidValue(prefix)) {
+        const affixWrapperCls = classNames(`${preCls}-affix-wrapper`, {
+          [`${preCls}-affix-wrapper-focused`]: focused.value,
+          [`${preCls}-affix-wrapper-disabled`]: props.disabled,
+          [`${preCls}-affix-wrapper-sm`]: size.value === 'small',
+          [`${preCls}-affix-wrapper-lg`]: size.value === 'large',
+          [`${preCls}-affix-wrapper-rtl`]: direction.value === 'rtl',
+          [`${preCls}-affix-wrapper-readonly`]: readonly,
+          [`${preCls}-affix-wrapper-borderless`]: !bordered,
+          // className will go to addon wrapper
+          [`${className}`]: !hasAddon && className,
+        });
+        element = (
+          <div
+            class={affixWrapperCls}
+            style={style}
+            onMouseup={() => inputNumberRef.value!.focus()}
+          >
+            <span class={`${preCls}-prefix`}>{prefix}</span>
+            {element}
+          </div>
+        );
+      }

-      if (isValidValue(addonBefore) || isValidValue(addonAfter)) {
+      if (hasAddon) {
        const wrapperClassName = `${preCls}-group`;
        const addonClassName = `${wrapperClassName}-addon`;
        const addonBeforeNode = addonBefore ? (
@ -141,7 +170,7 @@ const InputNumber = defineComponent({
          },
          className,
        );
-        return (
+        element = (
          <div class={mergedGroupClassName} style={style}>
            <div class={mergedWrapperClassName}>
              {addonBeforeNode}
--- a/components/input-number/index.zh-CN.md
+++ b/components/input-number/index.zh-CN.md
@ -21,7 +21,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
 | autofocus | 自动获取焦点 | boolean | false |  |
 | defaultValue | 初始值 | number |  |  |
 | disabled | 禁用 | boolean | false |  |
-| formatter | 指定输入框展示值的格式 | function(value: number \| string): string | - |  |
+| formatter | 指定输入框展示值的格式 | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 3.0 |
 | max | 最大值 | number | Infinity |  |
 | min | 最小值 | number | -Infinity |  |
 | parser | 指定从 formatter 里转换回数字的方式，和 formatter 搭配使用 | function( string): number | - |  |
@ -36,6 +36,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
 | controls | 是否显示增减按钮 | boolean | true | 3.0 |
 | keyboard | 是否启用键盘快捷行为 | boolean | true | 3.0 |
 | stringMode | 字符值模式，开启后支持高精度小数。同时 `change` 事件将返回 string 类型 | boolean | false | 3.0 |
+| controls | 是否显示增减按钮 | boolean | true | 3.0 |
+| prefix | 带有前缀图标的 input | slot | - | 3.0 |

 ### 事件

--- a/components/input-number/style/affix.less
+++ b/components/input-number/style/affix.less
@ -0,0 +1,64 @@
+@import '../../input/style/mixin';
+@import (reference) '../../style/themes/index';
+@input-prefix-cls: ~'@{ant-prefix}-input';
+
+@input-affix-margin: 4px;
+
+.@{ant-prefix}-input-number {
+  &-affix-wrapper {
+    .input();
+    // or number handler will cover form status
+    position: static;
+    display: inline-flex;
+    width: 90px;
+    padding: 0;
+    padding-inline-start: @input-padding-horizontal-base;
+
+    &:not(&-disabled):hover {
+      .hover();
+      z-index: 1;
+    }
+
+    &-focused,
+    &:focus {
+      z-index: 1;
+    }
+
+    &-disabled {
+      .@{ant-prefix}-input-number[disabled] {
+        background: transparent;
+      }
+    }
+
+    > div.@{ant-prefix}-input-number {
+      width: 100%;
+      border: none;
+      outline: none;
+
+      &.@{ant-prefix}-input-number-focused {
+        box-shadow: none !important;
+      }
+    }
+
+    input.@{ant-prefix}-input-number-input {
+      padding: 0;
+    }
+
+    &::before {
+      width: 0;
+      visibility: hidden;
+      content: '\a0';
+    }
+  }
+
+  &-prefix {
+    display: flex;
+    flex: none;
+    align-items: center;
+    margin-inline-end: @input-affix-margin;
+  }
+}
+
+.@{ant-prefix}-input-number-group-wrapper .@{ant-prefix}-input-number-affix-wrapper {
+  width: 100%;
+}
--- a/components/input-number/style/index.less
+++ b/components/input-number/style/index.less
@ -1,6 +1,7 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
+@import './affix';

@input-number-prefix-cls: ~'@{ant-prefix}-input-number';
@form-item-prefix-cls: ~'@{ant-prefix}-form-item';