mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
docs(components): [input] adjust the recommended value for the type (#22757)
closed #14686
This commit is contained in:
qiang
@@ -117,42 +117,42 @@ input/length-limiting
|
||||
|
||||
### Attributes
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
|
||||
| type | type of input | ^[string]`'text' \| 'textarea' \| 'password' \| 'button' \| 'checkbox' \| 'file' \| 'number' \| 'radio' \| ...` [native input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
|
||||
| model-value / v-model | binding value | ^[string] / ^[number] | — |
|
||||
| model-modifiers ^(2.11.5) | v-model modifiers, reference [Vue modifiers](https://vuejs.org/guide/essentials/forms.html#modifiers) | ^[object]`{ lazy?: boolean, number?: boolean, trim?: boolean }` | — |
|
||||
| maxlength | same as `maxlength` in native input | ^[string] / ^[number] | — |
|
||||
| minlength | same as `minlength` in native input | ^[string] / ^[number] | — |
|
||||
| show-word-limit | whether show word count, only works when `type` is 'text' or 'textarea' | ^[boolean] | false |
|
||||
| word-limit-position ^(2.11.5) | word count position, valid when `show-word-limit` is true | ^[enum]`'inside' \| 'outside' ` | "inside" |
|
||||
| placeholder | placeholder of Input | ^[string] | — |
|
||||
| clearable | whether to show clear button, only works when `type` is not 'textarea' | ^[boolean] | false |
|
||||
| clear-icon ^(2.11.0) | custom clear icon component | ^[string] / ^[object]`Component` | CircleClose |
|
||||
| formatter | specifies the format of the value presented input.(only works when `type` is 'text') | ^[Function]`(value: string \| number) => string` | — |
|
||||
| parser | specifies the value extracted from formatter input.(only works when `type` is 'text') | ^[Function]`(value: string) => string` | — |
|
||||
| show-password | whether to show toggleable password input | ^[boolean] | false |
|
||||
| disabled | whether Input is disabled | ^[boolean] | false |
|
||||
| size | size of Input, works when `type` is not 'textarea' | ^[enum]`'large' \| 'default' \| 'small'` | — |
|
||||
| prefix-icon | prefix icon component | ^[string] / ^[Component] | — |
|
||||
| suffix-icon | suffix icon component | ^[string] / ^[Component] | — |
|
||||
| rows | number of rows of textarea, only works when `type` is 'textarea' | ^[number] | 2 |
|
||||
| autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. `{ minRows: 2, maxRows: 6 }` | ^[boolean] / ^[object]`{ minRows?: number, maxRows?: number }` | false |
|
||||
| autocomplete | same as `autocomplete` in native input | ^[string] | off |
|
||||
| name | same as `name` in native input | ^[string] | — |
|
||||
| readonly | same as `readonly` in native input | ^[boolean] | false |
|
||||
| max | same as `max` in native input | — | — |
|
||||
| min | same as `min` in native input | — | — |
|
||||
| step | same as `step` in native input | — | — |
|
||||
| resize | control the resizability | ^[enum]`'none' \| 'both' \| 'horizontal' \| 'vertical'` | — |
|
||||
| autofocus | same as `autofocus` in native input | ^[boolean] | false |
|
||||
| form | same as `form` in native input | `string` | — |
|
||||
| aria-label ^(a11y) ^(2.7.2) | same as `aria-label` in native input | ^[string] | — |
|
||||
| tabindex | input tabindex | ^[string] / ^[number] | — |
|
||||
| validate-event | whether to trigger form validation | ^[boolean] | true |
|
||||
| input-style | the style of the input element or textarea element | ^[string] / ^[object]`CSSProperties \| CSSProperties[] \| string[]` | {} |
|
||||
| label ^(a11y) ^(deprecated) | same as `aria-label` in native input | ^[string] | — |
|
||||
| inputmode ^(2.10.3) | same as `inputmode` in native input | ^[string] | — |
|
||||
| Name | Description | Type | Default |
|
||||
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ----------- |
|
||||
| type | type of input, see more in [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | ^[string]`'text' \| 'textarea' \| 'number' \| 'password' \| 'email' \| 'search' \| 'tel' \| 'url'` | text |
|
||||
| model-value / v-model | binding value | ^[string] / ^[number] | — |
|
||||
| model-modifiers ^(2.11.5) | v-model modifiers, reference [Vue modifiers](https://vuejs.org/guide/essentials/forms.html#modifiers) | ^[object]`{ lazy?: boolean, number?: boolean, trim?: boolean }` | — |
|
||||
| maxlength | same as `maxlength` in native input | ^[string] / ^[number] | — |
|
||||
| minlength | same as `minlength` in native input | ^[string] / ^[number] | — |
|
||||
| show-word-limit | whether show word count, only works when `type` is 'text' or 'textarea' | ^[boolean] | false |
|
||||
| word-limit-position ^(2.11.5) | word count position, valid when `show-word-limit` is true | ^[enum]`'inside' \| 'outside' ` | "inside" |
|
||||
| placeholder | placeholder of Input | ^[string] | — |
|
||||
| clearable | whether to show clear button, only works when `type` is not 'textarea' | ^[boolean] | false |
|
||||
| clear-icon ^(2.11.0) | custom clear icon component | ^[string] / ^[object]`Component` | CircleClose |
|
||||
| formatter | specifies the format of the value presented input.(only works when `type` is 'text') | ^[Function]`(value: string \| number) => string` | — |
|
||||
| parser | specifies the value extracted from formatter input.(only works when `type` is 'text') | ^[Function]`(value: string) => string` | — |
|
||||
| show-password | whether to show toggleable password input | ^[boolean] | false |
|
||||
| disabled | whether Input is disabled | ^[boolean] | false |
|
||||
| size | size of Input, works when `type` is not 'textarea' | ^[enum]`'large' \| 'default' \| 'small'` | — |
|
||||
| prefix-icon | prefix icon component | ^[string] / ^[Component] | — |
|
||||
| suffix-icon | suffix icon component | ^[string] / ^[Component] | — |
|
||||
| rows | number of rows of textarea, only works when `type` is 'textarea' | ^[number] | 2 |
|
||||
| autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. `{ minRows: 2, maxRows: 6 }` | ^[boolean] / ^[object]`{ minRows?: number, maxRows?: number }` | false |
|
||||
| autocomplete | same as `autocomplete` in native input | ^[string] | off |
|
||||
| name | same as `name` in native input | ^[string] | — |
|
||||
| readonly | same as `readonly` in native input | ^[boolean] | false |
|
||||
| max | same as `max` in native input | — | — |
|
||||
| min | same as `min` in native input | — | — |
|
||||
| step | same as `step` in native input | — | — |
|
||||
| resize | control the resizability | ^[enum]`'none' \| 'both' \| 'horizontal' \| 'vertical'` | — |
|
||||
| autofocus | same as `autofocus` in native input | ^[boolean] | false |
|
||||
| form | same as `form` in native input | `string` | — |
|
||||
| aria-label ^(a11y) ^(2.7.2) | same as `aria-label` in native input | ^[string] | — |
|
||||
| tabindex | input tabindex | ^[string] / ^[number] | — |
|
||||
| validate-event | whether to trigger form validation | ^[boolean] | true |
|
||||
| input-style | the style of the input element or textarea element | ^[string] / ^[object]`CSSProperties \| CSSProperties[] \| string[]` | {} |
|
||||
| label ^(a11y) ^(deprecated) | same as `aria-label` in native input | ^[string] | — |
|
||||
| inputmode ^(2.10.3) | same as `inputmode` in native input | ^[string] | — |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@@ -158,45 +158,45 @@ The corresponding methods are: `ElMessageBox`, `ElMessageBox.alert`, `ElMessageB
|
||||
|
||||
### Options
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------ |
|
||||
| autofocus | auto focus when open MessageBox | ^[boolean] | true |
|
||||
| title | title of the MessageBox | ^[string] | '' |
|
||||
| message | content of the MessageBox | ^[string] / ^[VNode] / ^[Function]`() => VNode` ^(2.2.17) | — |
|
||||
| dangerouslyUseHTMLString | whether `message` is treated as HTML string | ^[boolean] | false |
|
||||
| type | message type, used for icon display | ^[enum]`'primary' (2.9.11) \| 'success' \| 'info' \| 'warning' \| 'error'` | '' |
|
||||
| icon | custom icon component, overrides `type` | ^[string] / ^[Component] | '' |
|
||||
| closeIcon ^(2.9.5) | custom close icon component, default is Close | ^[string] / ^[Component] | '' |
|
||||
| customClass | custom class name for MessageBox | ^[string] | '' |
|
||||
| customStyle | custom inline style for MessageBox | ^[CSSProperties] | {} |
|
||||
| modal | whether a mask is displayed | ^[boolean] | true |
|
||||
| modalClass | custom class names for mask | string | — |
|
||||
| callback | MessageBox closing callback if you don't prefer Promise | ^[Function]`(value: string, action: Action) => any \| (action: Action) => any` | null |
|
||||
| showClose | whether to show close icon of MessageBox | ^[boolean] | true |
|
||||
| beforeClose | callback before MessageBox closes, and it will prevent MessageBox from closing | ^[Function]`(action: Action, instance: MessageBoxState, done: () => void) => void` | null |
|
||||
| distinguishCancelAndClose | whether to distinguish canceling and closing the MessageBox | ^[boolean] | false |
|
||||
| lockScroll | whether to lock body scroll when MessageBox prompts | ^[boolean] | true |
|
||||
| showCancelButton | whether to show a cancel button | ^[boolean] | false (true when called with confirm and prompt) |
|
||||
| showConfirmButton | whether to show a confirm button | ^[boolean] | true |
|
||||
| cancelButtonText | text content of cancel button | ^[string] | Cancel |
|
||||
| confirmButtonText | text content of confirm button | ^[string] | OK |
|
||||
| cancelButtonLoadingIcon ^(2.7.7) | loading icon content of cancel button | ^[string] / ^[Component] | Loading |
|
||||
| confirmButtonLoadingIcon ^(2.7.7) | loading icon content of confirm button | ^[string] / ^[Component] | Loading |
|
||||
| cancelButtonClass | custom class name of cancel button | ^[string] | '' |
|
||||
| confirmButtonClass | custom class name of confirm button | ^[string] | '' |
|
||||
| closeOnClickModal | whether MessageBox can be closed by clicking the mask | ^[boolean] | true (false when called with alert) |
|
||||
| closeOnPressEscape | whether MessageBox can be closed by pressing the ESC | ^[boolean] | true (false when called with alert) |
|
||||
| closeOnHashChange | whether to close MessageBox when hash changes | ^[boolean] | true |
|
||||
| showInput | whether to show an input | ^[boolean] | false (true when called with prompt) |
|
||||
| inputPlaceholder | placeholder of input | ^[string] | '' |
|
||||
| inputType | type of input | ^[string] | text |
|
||||
| inputValue | initial value of input | ^[string] | '' |
|
||||
| inputPattern | regexp for the input | ^[regexp] | null |
|
||||
| inputValidator | validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage | ^[Function]`(value: string) => boolean \| string`/ `undefined` | undefined |
|
||||
| inputErrorMessage | error message when validation fails | ^[string] | Illegal input |
|
||||
| center | whether to align the content in center | ^[boolean] | false |
|
||||
| draggable | whether MessageBox is draggable | ^[boolean] | false |
|
||||
| overflow ^(2.5.4) | draggable MessageBox can overflow the viewport | ^[boolean] | false |
|
||||
| roundButton | whether to use round button | ^[boolean] | false |
|
||||
| buttonSize | custom size of confirm and cancel buttons | ^[string]`'small' \| 'default' \| 'large'` | default |
|
||||
| appendTo ^(2.2.19) | set the root element for the message box | ^[CSSSelector] / ^[HTMLElement] | — |
|
||||
| Name | Description | Type | Default |
|
||||
| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------ |
|
||||
| autofocus | auto focus when open MessageBox | ^[boolean] | true |
|
||||
| title | title of the MessageBox | ^[string] | '' |
|
||||
| message | content of the MessageBox | ^[string] / ^[VNode] / ^[Function]`() => VNode` ^(2.2.17) | — |
|
||||
| dangerouslyUseHTMLString | whether `message` is treated as HTML string | ^[boolean] | false |
|
||||
| type | message type, used for icon display | ^[enum]`'primary' (2.9.11) \| 'success' \| 'info' \| 'warning' \| 'error'` | '' |
|
||||
| icon | custom icon component, overrides `type` | ^[string] / ^[Component] | '' |
|
||||
| closeIcon ^(2.9.5) | custom close icon component, default is Close | ^[string] / ^[Component] | '' |
|
||||
| customClass | custom class name for MessageBox | ^[string] | '' |
|
||||
| customStyle | custom inline style for MessageBox | ^[CSSProperties] | {} |
|
||||
| modal | whether a mask is displayed | ^[boolean] | true |
|
||||
| modalClass | custom class names for mask | string | — |
|
||||
| callback | MessageBox closing callback if you don't prefer Promise | ^[Function]`(value: string, action: Action) => any \| (action: Action) => any` | null |
|
||||
| showClose | whether to show close icon of MessageBox | ^[boolean] | true |
|
||||
| beforeClose | callback before MessageBox closes, and it will prevent MessageBox from closing | ^[Function]`(action: Action, instance: MessageBoxState, done: () => void) => void` | null |
|
||||
| distinguishCancelAndClose | whether to distinguish canceling and closing the MessageBox | ^[boolean] | false |
|
||||
| lockScroll | whether to lock body scroll when MessageBox prompts | ^[boolean] | true |
|
||||
| showCancelButton | whether to show a cancel button | ^[boolean] | false (true when called with confirm and prompt) |
|
||||
| showConfirmButton | whether to show a confirm button | ^[boolean] | true |
|
||||
| cancelButtonText | text content of cancel button | ^[string] | Cancel |
|
||||
| confirmButtonText | text content of confirm button | ^[string] | OK |
|
||||
| cancelButtonLoadingIcon ^(2.7.7) | loading icon content of cancel button | ^[string] / ^[Component] | Loading |
|
||||
| confirmButtonLoadingIcon ^(2.7.7) | loading icon content of confirm button | ^[string] / ^[Component] | Loading |
|
||||
| cancelButtonClass | custom class name of cancel button | ^[string] | '' |
|
||||
| confirmButtonClass | custom class name of confirm button | ^[string] | '' |
|
||||
| closeOnClickModal | whether MessageBox can be closed by clicking the mask | ^[boolean] | true (false when called with alert) |
|
||||
| closeOnPressEscape | whether MessageBox can be closed by pressing the ESC | ^[boolean] | true (false when called with alert) |
|
||||
| closeOnHashChange | whether to close MessageBox when hash changes | ^[boolean] | true |
|
||||
| showInput | whether to show an input | ^[boolean] | false (true when called with prompt) |
|
||||
| inputPlaceholder | placeholder of input | ^[string] | '' |
|
||||
| inputType | type of input, see more in [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | ^[string]`'text' \| 'textarea' \| 'number' \| 'password' \| 'email' \| 'search' \| 'tel' \| 'url'` | text |
|
||||
| inputValue | initial value of input | ^[string] | '' |
|
||||
| inputPattern | regexp for the input | ^[regexp] | null |
|
||||
| inputValidator | validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage | ^[Function]`(value: string) => boolean \| string`/ `undefined` | undefined |
|
||||
| inputErrorMessage | error message when validation fails | ^[string] | Illegal input |
|
||||
| center | whether to align the content in center | ^[boolean] | false |
|
||||
| draggable | whether MessageBox is draggable | ^[boolean] | false |
|
||||
| overflow ^(2.5.4) | draggable MessageBox can overflow the viewport | ^[boolean] | false |
|
||||
| roundButton | whether to use round button | ^[boolean] | false |
|
||||
| buttonSize | custom size of confirm and cancel buttons | ^[string]`'small' \| 'default' \| 'large'` | default |
|
||||
| appendTo ^(2.2.19) | set the root element for the message box | ^[CSSSelector] / ^[HTMLElement] | — |
|
||||
|
||||
@@ -22,6 +22,17 @@ export type InputModelModifiers = {
|
||||
trim?: boolean
|
||||
}
|
||||
export type InputAutoSize = { minRows?: number; maxRows?: number } | boolean
|
||||
// Some commonly used values for input type
|
||||
export type InputType =
|
||||
| 'text'
|
||||
| 'textarea'
|
||||
| 'number'
|
||||
| 'password'
|
||||
| 'email'
|
||||
| 'search'
|
||||
| 'tel'
|
||||
| 'url'
|
||||
| (string & NonNullable<unknown>)
|
||||
|
||||
export const inputProps = buildProps({
|
||||
/**
|
||||
@@ -70,10 +81,10 @@ export const inputProps = buildProps({
|
||||
type: [String, Number],
|
||||
},
|
||||
/**
|
||||
* @description type of input
|
||||
* @description type of input, see more in [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)
|
||||
*/
|
||||
type: {
|
||||
type: String,
|
||||
type: definePropType<InputType>(String),
|
||||
default: 'text',
|
||||
},
|
||||
/**
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import type { AppContext, CSSProperties, Component, VNode } from 'vue'
|
||||
import type { ComponentSize } from '@element-plus/constants'
|
||||
import type { InputType } from '@element-plus/components/input/src/input'
|
||||
|
||||
type MessageType = '' | 'primary' | 'success' | 'warning' | 'info' | 'error'
|
||||
|
||||
@@ -27,7 +28,7 @@ export declare interface MessageBoxState {
|
||||
showInput: boolean
|
||||
inputValue: string
|
||||
inputPlaceholder: string
|
||||
inputType: string
|
||||
inputType: InputType
|
||||
inputPattern: RegExp | null
|
||||
inputValidator: MessageBoxInputValidator
|
||||
inputErrorMessage: string
|
||||
@@ -180,8 +181,8 @@ export interface ElMessageBoxOptions {
|
||||
/** Regexp for the input */
|
||||
inputPattern?: RegExp
|
||||
|
||||
/** Input Type: text, textArea, password or number */
|
||||
inputType?: string
|
||||
/** type of input, see more in [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) */
|
||||
inputType?: InputType
|
||||
|
||||
/** Validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage */
|
||||
inputValidator?: MessageBoxInputValidator
|
||||
|
||||
Reference in New Issue
Block a user