mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-04-06 16:30:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [input-number] add prefix and suffix (#17993)

Browse Source 
* feat(components): [input-number] add prefix and suffix

* Update docs/en-US/component/input-number.md

Co-authored-by: btea <2356281422@qq.com>

* Update docs/en-US/component/input-number.md

Co-authored-by: btea <2356281422@qq.com>

* Update docs/en-US/component/input-number.md

Co-authored-by: btea <2356281422@qq.com>

* Update docs/en-US/component/input-number.md

Co-authored-by: btea <2356281422@qq.com>

* Update docs/en-US/component/input-number.md

Co-authored-by: btea <2356281422@qq.com>

* Update docs/en-US/component/input-number.md

Co-authored-by: btea <2356281422@qq.com>

* Update docs/en-US/component/input-number.md

Co-authored-by: btea <2356281422@qq.com>

* Update packages/components/input-number/src/input-number.vue

Co-authored-by: btea <2356281422@qq.com>

* Update packages/components/input-number/src/input-number.vue

Co-authored-by: btea <2356281422@qq.com>

* feat(components): [input-number] add prefix and suffix

* feat(components): [input-number] add prefix and suffix

* feat(components): [input-number] add prefix and suffix

---------

Co-authored-by: btea <2356281422@qq.com>
This commit is contained in:
guze2003 2024-09-23 15:14:29 +08:00 committed by GitHub
parent cd517d6743
commit c8d0d35e3f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 38 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -87,6 +87,14 @@ input-number/custom
:::
## With prefix and suffix ^(2.8.4)
:::demo Use the prefix and suffix named slots.
input-number/with-prefix-suffix
:::
## API
### Attributes
@ -111,13 +119,14 @@ input-number/custom
| id | same as `id` in native input | ^[string] | — |
| 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 |
| prefix ^(2.8.4) | content as Input prefix |
| suffix ^(2.8.4) | content as Input suffix |
### Events

19
docs/examples/input-number/with-prefix-suffix.vue Normal file
View File

@ -0,0 +1,19 @@
<template>
<el-space>
<el-input-number v-model="num" :min="1" :max="10">
<template #prefix>
<span>￥</span>
</template>
</el-input-number>
<el-input-number v-model="num" :min="1" :max="10">
<template #suffix>
<span>RMB</span>
</template>
</el-input-number>
</el-space>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const num = ref(1)
</script>

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

@ -60,7 +60,14 @@
@focus="handleFocus"
@input="handleInput"
@change="handleInputChange"
/>
>
<template v-if="$slots.prefix" #prefix>
<slot name="prefix" />
</template>
<template v-if="$slots.suffix" #suffix>
<slot name="suffix" />
</template>
</el-input>
</div>
</template>
<script lang="ts" setup>