VTextarea 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. | ||
| auto-grow | ||
| MISSING DESCRIPTION | ||
| autofocus | ||
| Automatically grow the textarea depending on amount of text. | ||
| 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 | ||
| Allows for the component to be cleared. | ||
| clearable | ||
| The icon used when the clearable prop is set to true. | ||
| 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 | ||
| Display the input length but do not provide any validation. | ||
| 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 box shadow when using a variant with elevation. | ||
| focused | ||
| Forces a focused state styling on the component. | ||
| hide-details | ||
| ides 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-rows | ||
| Specifies the maximum number of row count | ||
| 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. | ||
| no-resize | ||
| Remove resize handle. | ||
| 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 component, uses the same syntax as v-icon. | ||
| prepend-inner-icon | ||
| Creates a v-icon component in the prepend-inner slot. | ||
| readonly | ||
| Puts input in readonly state. | ||
| reverse | ||
| Reverses the orientation. | ||
| rounded | ||
| Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page . | ||
| rows | ||
| Default row count. | ||
| 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. | ||
| 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. |
| details |
| lot 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 |
| dds an item outside the input and before input content. |
| prepend-inner |
| Slot that is prepended to the input. |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $textarea-box-enclosed-prefix-margin-top | |
| $textarea-box-enclosed-single-outlined-label-top | |
| $textarea-box-enclosed-single-outlined-margin-top | |
| $textarea-dense-append-prepend-margin-top | |
| $textarea-dense-box-enclosed-single-outlined-margin-top | |
| $textarea-enclosed-text-slot-margin | |
| $textarea-enclosed-text-slot-padding | |
| $textarea-prefix-padding-top | |
| $textarea-solo-append-padding | |
| $textarea-solo-append-prepend-margin-top | |