feat: add slots for input-number box value manipulation icons

arco-design · Jul 13, 2023 · 546ffa2 · 546ffa2
1 parent 98ed3ea
commit 546ffa2
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 2 deletions.
diff --git a/packages/web-vue/components/input-number/README.en-US.md b/packages/web-vue/components/input-number/README.en-US.md
@@ -18,6 +18,8 @@ description: Only input boxes in numeric format are allowed.
 
 @import ./__demo__/prefix.md
 
+@import ./__demo__/step-icon.md
+
 @import ./__demo__/format.md
 
 @import ./__demo__/model.md
@@ -65,6 +67,8 @@ description: Only input boxes in numeric format are allowed.
 
 |Slot Name|Description|Parameters|
 |---|---|---|
+|minus|Minus|-|
+|plus|Plus|-|
 |append|Append|-|
 |prepend|Prepend|-|
 |suffix|Suffix|-|

diff --git a/packages/web-vue/components/input-number/README.zh-CN.md b/packages/web-vue/components/input-number/README.zh-CN.md
@@ -16,6 +16,8 @@ description: 仅允许输入数字格式的输入框。
 
 @import ./__demo__/prefix.md
 
+@import ./__demo__/step-icon.md
+
 @import ./__demo__/format.md
 
 @import ./__demo__/model.md
@@ -63,6 +65,8 @@ description: 仅允许输入数字格式的输入框。
 
 |插槽名|描述|参数|
 |---|:---:|---|
+|minus|数值减少图标|-|
+|plus|数值增加图标|-|
 |append|后置标签|-|
 |prepend|前置标签|-|
 |suffix|后缀|-|

diff --git a/packages/web-vue/components/input-number/TEMPLATE.md b/packages/web-vue/components/input-number/TEMPLATE.md
@@ -27,6 +27,8 @@ description: Only input boxes in numeric format are allowed.
 
 @import ./__demo__/prefix.md
 
+@import ./__demo__/step-icon.md
+
 @import ./__demo__/format.md
 
 @import ./__demo__/model.md

diff --git a/packages/web-vue/components/input-number/__demo__/step-icon.md b/packages/web-vue/components/input-number/__demo__/step-icon.md
@@ -0,0 +1,32 @@
+```yaml
+title:
+  zh-CN: 自定义图标
+  en-US: Step Icon
+```
+
+## zh-CN
+
+通过指定 `plus` 和 `minus` 插槽来修改数值增减操作的图标。
+
+---
+
+## en-US
+
+To Add the icons for the increment and decrement operations by specifying the `plus` and `minus` slots.
+
+---
+
+```vue
+<template>
+  <a-space direction="vertical" size="large">
+    <a-input-number :style="{width:'320px'}" placeholder="Please enter something" allow-clear>
+       <template #plus>
+        <icon-plus />
+      </template>
+      <template #minus>
+        <icon-minus />
+      </template>
+    </a-input-number>
+  </a-space>
+</template>
+```
diff --git a/packages/web-vue/components/input-number/input-number.tsx b/packages/web-vue/components/input-number/input-number.tsx
@@ -214,6 +214,16 @@ export default defineComponent({
    * @en Append
    * @slot append
    */
+  /**
+   * @zh 数值增加图标
+   * @en Plus
+   * @slot plus
+   */
+  /**
+   * @zh 数值减少图标
+   * @en Minus
+   * @slot minus
+   */
   setup(props, { emit, slots }) {
     const { size, disabled } = toRefs(props);
     const prefixCls = getPrefixCls('input-number');
@@ -498,7 +508,7 @@ export default defineComponent({
               onMouseup={clearRepeatTimer}
               onMouseleave={clearRepeatTimer}
             >
-              <IconUp />
+              {slots.plus ? slots.plus?.() : <IconUp />}
             </button>
             <button
               class={[
@@ -515,7 +525,7 @@ export default defineComponent({
               onMouseup={clearRepeatTimer}
               onMouseleave={clearRepeatTimer}
             >
-              <IconDown />
+              {slots.minus ? slots.minus?.() : <IconDown />}
             </button>
           </div>
         </>