mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-02-17 11:49:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [input-number] support slot custom icons (#16275)

Browse Source 
* 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>
This commit is contained in:
selicens 2024-03-29 14:10:29 +08:00 committed by GitHub
parent 42fff1ef63
commit 1ec6fe5830
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 94 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
docs/en-US/component/input-number.md
View File

@ -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 |

41
docs/examples/input-number/custom.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<el-space direction="vertical">
<el-space>
<el-input-number v-model="num" />
<el-input-number v-model="num">
<template #decrement-icon>
<el-icon>
<ArrowDown />
</el-icon>
</template>
<template #increase-icon>
<el-icon>
<ArrowUp />
</el-icon>
</template>
</el-input-number>
</el-space>
<el-space>
<el-input-number v-model="num" controls-position="right" />
<el-input-number v-model="num" controls-position="right">
<template #decrement-icon>
<el-icon>
<Minus />
</el-icon>
</template>
<template #increase-icon>
<el-icon>
<Plus />
</el-icon>
</template>
</el-input-number>
</el-space>
</el-space>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { ArrowDown, ArrowUp, Minus, Plus } from '@element-plus/icons-vue'
const num = ref(1)
</script>

26
packages/components/input-number/__tests__/input-number.test.tsx
View File

@ -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(() => (
<InputNumber
v-slots={{
decreaseIcon: () => (
<ElIcon>
<ArrowDown />
</ElIcon>
),
increaseIcon: () => (
<ElIcon>
<ArrowUp />
</ElIcon>
),
}}
/>
))
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')
})
})

20
packages/components/input-number/src/input-number.vue
View File

@ -17,10 +17,12 @@
:class="[ns.e('decrease'), ns.is('disabled', minDisabled)]"
@keydown.enter="decrease"
>
<el-icon>
<arrow-down v-if="controlsAtRight" />
<minus v-else />
</el-icon>
<slot name="decrease-icon">
<el-icon>
<arrow-down v-if="controlsAtRight" />
<minus v-else />
</el-icon>
</slot>
</span>
<span
v-if="controls"
@ -30,10 +32,12 @@
:class="[ns.e('increase'), ns.is('disabled', maxDisabled)]"
@keydown.enter="increase"
>
<el-icon>
<arrow-up v-if="controlsAtRight" />
<plus v-else />
</el-icon>
<slot name="increase-icon">
<el-icon>
<arrow-up v-if="controlsAtRight" />
<plus v-else />
</el-icon>
</slot>
</span>
<el-input
:id="id"