From 1ec6fe583078aaa6f0d439198687ae48a266feb2 Mon Sep 17 00:00:00 2001
From: selicens <1244620067@qq.com>
Date: Fri, 29 Mar 2024 14:10:29 +0800
Subject: [PATCH] feat(components): [input-number] support slot custom icons
(#16275)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* feat(components): support slot custom icons
* chore：add version identifier
Co-authored-by: btea <2356281422@qq.com>
* chore: adjusting Layout
* docs: add version
* chore: rename slots
* test: update test cases
* docs: uodate description
* chore: rename
---------
Co-authored-by: btea <2356281422@qq.com>
---
docs/en-US/component/input-number.md | 15 +++++++
docs/examples/input-number/custom.vue | 41 +++++++++++++++++++
.../__tests__/input-number.test.tsx | 26 ++++++++++++
.../input-number/src/input-number.vue | 20 +++++----
4 files changed, 94 insertions(+), 8 deletions(-)
create mode 100644 docs/examples/input-number/custom.vue
diff --git a/docs/en-US/component/input-number.md b/docs/en-US/component/input-number.md
index 9b53cf8fa5..367c0fda09 100644
--- a/docs/en-US/component/input-number.md
+++ b/docs/en-US/component/input-number.md
@@ -79,6 +79,14 @@ input-number/controlled
:::
+## Custom Icon ^(2.6.3)
+
+:::demo Use `decrease-icon` and `increase-icon` to set custom icons.
+
+input-number/custom
+
+:::
+
## API
### Attributes
@@ -103,6 +111,13 @@ input-number/controlled
| value-on-clear ^(2.2.0) | value should be set when input box is cleared | ^[number] / ^[null] / ^[enum]`'min' \| 'max'` | — |
| validate-event | whether to trigger form validation | ^[boolean] | true |
+### Slots
+
+| Name | Description |
+| ---------------------- | ------------------------------------- |
+| decrease-icon ^(2.6.3) | custom input box button decrease icon |
+| increase-icon ^(2.6.3) | custom input box button increase icon |
+
### Events
| Name | Description | Type |
diff --git a/docs/examples/input-number/custom.vue b/docs/examples/input-number/custom.vue
new file mode 100644
index 0000000000..fb132cd42e
--- /dev/null
+++ b/docs/examples/input-number/custom.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/components/input-number/__tests__/input-number.test.tsx b/packages/components/input-number/__tests__/input-number.test.tsx
index 11b0cde6fd..b26d6ccce1 100755
--- a/packages/components/input-number/__tests__/input-number.test.tsx
+++ b/packages/components/input-number/__tests__/input-number.test.tsx
@@ -3,6 +3,7 @@ import { mount } from '@vue/test-utils'
import { describe, expect, it, test, vi } from 'vitest'
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
import { ElFormItem } from '@element-plus/components/form'
+import { ElIcon } from '@element-plus/components/icon'
import InputNumber from '../src/input-number.vue'
const mouseup = new Event('mouseup')
@@ -568,4 +569,29 @@ describe('InputNumber.vue', () => {
1, 2,
])
})
+
+ test('use slot custom icon', async () => {
+ const wrapper = mount(() => (
+ (
+
+
+
+ ),
+ increaseIcon: () => (
+
+
+
+ ),
+ }}
+ />
+ ))
+ const increase = wrapper.find('.el-input-number__increase i')
+ const decrease = wrapper.find('.el-input-number__decrease i')
+ expect(increase.exists()).toBe(true)
+ expect(decrease.exists()).toBe(true)
+ expect(increase.classes()).toContain('el-icon')
+ expect(decrease.classes()).toContain('el-icon')
+ })
})
diff --git a/packages/components/input-number/src/input-number.vue b/packages/components/input-number/src/input-number.vue
index eadc4c7e38..dadb1dcfa7 100755
--- a/packages/components/input-number/src/input-number.vue
+++ b/packages/components/input-number/src/input-number.vue
@@ -17,10 +17,12 @@
:class="[ns.e('decrease'), ns.is('disabled', minDisabled)]"
@keydown.enter="decrease"
>
-
-
-
-
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+