VTextField API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| active | ||
| Controls the active state of the item. This is typically used to highlight the component. | ||
| append-icon | ||
| Creates a v-icon component after default content in the append slot. | ||
| append-inner-icon | ||
| Creates a v-icon component in the append-inner slot. | ||
| autofocus | ||
| Enables autofocus. | ||
| base-color | ||
| Sets the color of the input when it is not focused. | ||
| bg-color | ||
| Applies specified color to the control’s background. Used on components that also support the color prop. - supports utility colors (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page . | ||
| center-affix | ||
| Vertically align appendInner, prependInner, clearIcon and label in the center. | ||
| clear-icon | ||
| Applied when using clearable and the input is dirty. | ||
| clearable | ||
| Allows for the component to be cleared. | ||
| color | ||
| Applies specified color to the control - supports utility colors (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page . | ||
| counter | ||
| Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation. | ||
| counter-value | ||
| Function returns the counter display text. | ||
| density | ||
| Adjusts the vertical height used by the component. | ||
| direction | ||
| Changes the direction of the input. | ||
| dirty | ||
| Manually apply the dirty state styling. | ||
| disabled | ||
| Removes the ability to click or target the input. | ||
| error | ||
| Puts the input in a manual error state. | ||
| error-messages | ||
| Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation. | ||
| flat | ||
| Removes elevation (shadow) added to element when using the solo or solo-inverted props. | ||
| focused | ||
| Forces a focused state styling on the component. | ||
| hide-details | ||
| Hides hint and validation errors. When set to auto messages will be rendered only if there’s a message (hint, error message, counter value etc) to display. | ||
| hide-spin-buttons | ||
| Hides spin buttons on the input when type is set to number. | ||
| hint | ||
| Displays hint text below the input when focused. Force this always open with the persistent-hint property. | ||
| id | ||
| Sets the DOM id on the component. | ||
| label | ||
| Sets the text of the v-label or v-field-label component. | ||
| loading | ||
| Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it’s supported by the component) or the primary color. | ||
| max-errors | ||
| Control the maximum number of shown errors from validation. | ||
| max-width | ||
| Sets the maximum width for the component. | ||
| messages | ||
| Displays a list of messages or a single message if using a string. | ||
| min-width | ||
| Sets the minimum width for the component. | ||
| model-modifiers | ||
| FOR INTERNAL USE ONLY | ||
| model-value | ||
| The v-model value of the component. If component supports the multiple prop, this defaults to an empty array. | ||
| name | ||
| Sets the component’s name attribute. | ||
| persistent-clear | ||
| Always show the clearable icon when the input is dirty (By default it only shows on hover). | ||
| persistent-counter | ||
| Forces counter to always be visible. | ||
| persistent-hint | ||
| Forces hint to always be visible. | ||
| persistent-placeholder | ||
| Forces placeholder to always be visible. | ||
| placeholder | ||
| Sets the input’s placeholder text. | ||
| prefix | ||
| Displays prefix text. | ||
| prepend-icon | ||
| Prepends an icon to the outnside the component’s input, uses the same syntax as v-icon. | ||
| prepend-inner-icon | ||
| Prepends an icon inside the component’s input, uses the same syntax as v-icon. | ||
| readonly | ||
| Puts input in readonly state. | ||
| reverse | ||
| Reverses the input orientation. | ||
| role | ||
| The role attribute applied to the input. | ||
| rounded | ||
| Adds a border radius to the input. | ||
| rules | ||
| Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string. | ||
| single-line | ||
| Label does not move on focus/dirty. | ||
| suffix | ||
| Displays suffix text. | ||
| theme | ||
| Specify a theme for this component and all of its children. | ||
| tile | ||
| Removes any applied border-radius from the component. | ||
| type | ||
| Sets input type. | ||
| validate-on | ||
| Change what type of event triggers validation to run. | ||
| validation-value | ||
| The value used when applying validation rules. | ||
| variant | ||
| Applies a distinct style to the component. | ||
| width | ||
| Sets the width for the component. | ||
事件
| 名称 | 类型 |
|---|---|
| click:append | |
| Emitted when append icon is clicked. | |
| click:appendInner | |
| Emitted when appended inner icon is clicked. | |
| click:clear | |
| Emitted when clearable icon clicked. | |
| click:control | |
| Emitted when the main input is clicked. | |
| click:prepend | |
| Emitted when prepended icon is clicked. | |
| click:prependInner | |
| Emitted when prepended inner icon is clicked. | |
| mousedown:control | |
| Event that is emitted when using mousedown on the main control area. | |
| update:focused | |
| Emitted when the input is focused or blurred | |
| update:modelValue | |
| Event that is emitted when the component’s model changes. | |
插槽
| append |
| Adds an item inside the input and after input content. |
| append-inner |
| Adds an item inside the input content. |
| clear |
| Slot for custom clear icon (displayed when the clearable prop is equal to true). |
| counter |
| Slot for the input’s counter text. |
| default |
| The default Vue slot. |
| details |
| Slot for custom input details to modifying the display of messages. |
| label |
| The default slot of the v-label or v-field-label component. |
| loader |
| Slot for custom loader (displayed when loading prop is equal to true). |
| message |
| Slot used to customize the message content. |
| prepend |
| Adds an item outside the input and before input content. |
| prepend-inner |
| Slot that is prepended to the input. |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $text-field-affix-color | |
| $text-field-border-radius | |
| $text-field-details-padding-inline | |
| $text-field-disabled-affix-color | |
| $text-field-input-flex | |
| $text-field-input-padding-end | |
| $text-field-input-padding-start | |
| $text-field-input-transition | |