VInput API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| append-icon | ||
| Creates a v-icon component after default content in the append slot. | ||
| center-affix | ||
| Vertically align appendInner, prependInner, clearIcon and label in the center. | ||
| density | ||
| Adjusts the vertical height used by the component. | ||
| direction | ||
| Changes the direction of the input. | ||
| disabled | ||
| Removes the ability to click or target the component. | ||
| 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. | ||
| 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. | ||
| 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-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-hint | ||
| Forces hint to always be visible. | ||
| prepend-icon | ||
| Prepends an icon to the component, uses the same syntax as v-icon. | ||
| readonly | ||
| Puts input in readonly state. | ||
| 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. | ||
| theme | ||
| Specify a theme for this component and all of its children. | ||
| validate-on | ||
| Change what type of event triggers validation to run. | ||
| validation-value | ||
| The value used when applying validation rules. | ||
| width | ||
| Sets the width for the component. | ||
事件
| 名称 | 类型 |
|---|---|
| click:append | |
| Emitted when appended icon is clicked. | |
| click:prepend | |
| Emitted when prepended icon is clicked. | |
| update:focused | |
| Event that is emitted when the component’s focus state changes. | |
| update:modelValue | |
| Event that is emitted when the component’s model changes. | |
插槽
| append |
| Adds an item inside the input and after input content. |
| default |
| The default Vue slot. |
| details |
| Slot for custom input details to modifying the display of messages. |
| message |
| Slot used to customize the message content. |
| prepend |
| Adds an item outside the input and before input content. |
可用属性
| errorMessages |
| MISSING DESCRIPTION (edit in github ) |
| isValid |
| MISSING DESCRIPTION (edit in github ) |
| reset |
| Resets the input value. |
| resetValidation |
| Resets validation of the input without modifying its value. |
| validate |
| Validates the input’s value. |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $input-affix-margin-inside | |
| $input-chips-margin-bottom | |
| $input-chips-margin-top | |
| $input-control-height | |
| $input-density | |
| $input-details-font-size | |
| $input-details-font-weight | |
| $input-details-letter-spacing | |
| $input-details-line-height | |
| $input-details-min-height | |
| $input-details-padding-above | |
| $input-details-transition | |
| $input-flex | |
| $input-font-size | |
| $input-font-weight | |
| $input-line-height | |