test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-02 19:28:14 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

docs(components): [input-number] (#11063)

Browse Source 
* Update form docs with new syntax.
This commit is contained in:
Xc 2023-02-12 01:33:19 +08:00 committed by GitHub
parent 9de0a15b9a
commit 06126ea571
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 84 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -79,38 +79,41 @@ input-number/controlled
::: :::
## Attributes ## API
| Name | Description | Type | Accepted Values | Default | ### Attributes
| ----------------------------- | ------------------------------------------------ | ---------------------- | ----------------------- | ----------- |
| model-value / v-model | binding value | number / undefined | — | — |
| min | the minimum allowed value | number | — | `-Infinity` |
| max | the maximum allowed value | number | — | `Infinity` |
| step | incremental step | number | — | 1 |
| step-strictly | whether input value can only be multiple of step | boolean | — | false |
| precision | precision of input value | number | — | — |
| size | size of the component | string | large / default / small | default |
| readonly | same as `readonly` in native input | boolean | — | false |
| disabled | whether the component is disabled | boolean | — | false |
| controls | whether to enable the control buttons | boolean | — | true |
| controls-position | position of the control buttons | string | right | - |
| name | same as `name` in native input | string | — | — |
| label | label text | string | — | — |
| placeholder | placeholder in input | string | - | - |
| value-on-clear **(\> 2.2.0)** | value should be set when input box is cleared | string / number / null | min / max | - |
| validate-event | whether to trigger form validation | boolean | - | true |
## Events | Name | Description | Type | Default |
| -------------------------------------------- | ------------------------------------------------ | --------------------------------------------- | --------- |
| model-value / v-model | binding value | ^[number] | — |
| min | the minimum allowed value | ^[number] | -Infinity |
| max | the maximum allowed value | ^[number] | Infinity |
| step | incremental step | ^[number] | 1 |
| step-strictly | whether input value can only be multiple of step | ^[boolean] | false |
| precision | precision of input value | ^[number] | — |
| size | size of the component | ^[enum]`'large' \| 'default' \| 'small'` | default |
| readonly | same as `readonly` in native input | ^[boolean] | false |
| disabled | whether the component is disabled | ^[boolean] | false |
| controls | whether to enable the control buttons | ^[boolean] | true |
| controls-position | position of the control buttons | ^[enum]`'' \| 'right'` | — |
| name | same as `name` in native input | ^[string] | — |
| label | same as `label` in native input | ^[string] | — |
| placeholder | same as `placeholder` in native input | ^[string] | — |
| id | same as `id` in native input | ^[string] | — |
| value-on-clear<VersionTag version="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 |
| Name | Description | Parameters | ### Events
| ------ | ------------------------------- | ------------------------------------------------------ |
| change | triggers when the value changes | (currentValue: number \| NaN, oldValue: number \| NaN) |
| blur | triggers when Input blurs | (event: FocusEvent) |
| focus | triggers when Input focuses | (event: FocusEvent) |
## Methods | Name | Description | Type |
| ------ | ------------------------------- | --------------------------------------------------------------------------------------- |
| change | triggers when the value changes | ^[Function]`(currentValue: number \| undefined, oldValue: number \| undefined) => void` |
| blur | triggers when Input blurs | ^[Function]`(event: FocusEvent) => void` |
| focus | triggers when Input focuses | ^[Function]`(event: FocusEvent) => void` |
| Method | Description | Parameters | ### Exposes
| ------ | -------------------------------- | ---------- |
| focus | get focus the input component | - | | Name | Description | Type |
| blur | remove focus the input component | — | | ----- | -------------------------------- | ----------------------- |
| focus | get focus the input component | ^[Function]`() => void` |
| blur | remove focus the input component | ^[Function]`() => void` |

51
packages/components/input-number/src/input-number.ts
View File

@ -10,50 +10,101 @@ import type { ExtractPropTypes } from 'vue'
import type InputNumber from './input-number.vue' import type InputNumber from './input-number.vue'
export const inputNumberProps = buildProps({ export const inputNumberProps = buildProps({
/**
* @description same as `id` in native input
*/
id: { id: {
type: String, type: String,
default: undefined, default: undefined,
}, },
/**
* @description incremental step
*/
step: { step: {
type: Number, type: Number,
default: 1, default: 1,
}, },
/**
* @description whether input value can only be multiple of step
*/
stepStrictly: Boolean, stepStrictly: Boolean,
/**
* @description the maximum allowed value
*/
max: { max: {
type: Number, type: Number,
default: Number.POSITIVE_INFINITY, default: Number.POSITIVE_INFINITY,
}, },
/**
* @description the minimum allowed value
*/
min: { min: {
type: Number, type: Number,
default: Number.NEGATIVE_INFINITY, default: Number.NEGATIVE_INFINITY,
}, },
/**
* @description binding value
*/
modelValue: Number, modelValue: Number,
/**
* @description same as `readonly` in native input
*/
readonly: Boolean, readonly: Boolean,
/**
* @description whether the component is disabled
*/
disabled: Boolean, disabled: Boolean,
/**
* @description size of the component
*/
size: useSizeProp, size: useSizeProp,
/**
* @description whether to enable the control buttons
*/
controls: { controls: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
/**
* @description position of the control buttons
*/
controlsPosition: { controlsPosition: {
type: String, type: String,
default: '', default: '',
values: ['', 'right'], values: ['', 'right'],
}, },
/**
* @description value should be set when input box is cleared
*/
valueOnClear: { valueOnClear: {
type: [String, Number, null], type: [String, Number, null],
validator: (val: 'min' | 'max' | number | null) => validator: (val: 'min' | 'max' | number | null) =>
val === null || isNumber(val) || ['min', 'max'].includes(val), val === null || isNumber(val) || ['min', 'max'].includes(val),
default: null, default: null,
}, },
/**
* @description same as `name` in native input
*/
name: String, name: String,
/**
* @description same as `label` in native input
*/
label: String, label: String,
/**
* @description same as `placeholder` in native input
*/
placeholder: String, placeholder: String,
/**
* @description precision of input value
*/
precision: { precision: {
type: Number, type: Number,
validator: (val: number) => validator: (val: number) =>
val >= 0 && val === Number.parseInt(`${val}`, 10), val >= 0 && val === Number.parseInt(`${val}`, 10),
}, },
/**
* @description whether to trigger form validation
*/
validateEvent: { validateEvent: {
type: Boolean, type: Boolean,
default: true, default: true,