VField API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| active | ||
| Controls the active state of the item. This is typically used to highlight the component. | ||
| append-inner-icon | ||
| Creates a v-icon component in the append-inner slot. | ||
| 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 | ||
| The icon used when the clearable prop is set to true. | ||
| 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 . | ||
| 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. | ||
| flat | ||
| Removes box shadow when using a variant with elevation. | ||
| focused | ||
| Forces a focused state styling on the component. | ||
| 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. | ||
| model-value | ||
| The v-model value of the component. If component supports the multiple prop, this defaults to an empty array. | ||
| persistent-clear | ||
| Always show the clearable icon when the input is dirty (By default it only shows on hover). | ||
| prepend-inner-icon | ||
| Creates a v-icon component in the prepend-inner slot. | ||
| 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 . | ||
| single-line | ||
| Label does not move on focus/dirty. | ||
| theme | ||
| Specify a theme for this component and all of its children. | ||
| tile | ||
| Removes any applied border-radius from the component. | ||
| variant | ||
| Applies a distinct style to the component. | ||
事件
| 名称 | 类型 |
|---|---|
| click:appendInner | |
| Emitted when appended inner icon is clicked. | |
| click:clear | |
| Emitted when clearable icon clicked. | |
| click:prependInner | |
| Emitted when prepended inner icon is clicked. | |
| update:focused | |
| Emitted when the input is focused or blurred | |
| update:modelValue | |
| Event that is emitted when the component’s model changes. | |
插槽
| append-inner |
| Adds an item inside the input content. |
| clear |
| Slot for custom clear icon (displayed when the clearable prop is equal to true). |
| default |
| The default Vue slot. |
| 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). |
| prepend-inner |
| Slot that is prepended to the input. |
可用属性
| controlRef |
| Reference to the control element of the field. |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $field-border-radius | |
| $field-border-width | |
| $field-chip-height | |
| $field-clearable-margin | |
| $field-clearable-transition | |
| $field-color | |
| $field-control-affixed-inner-padding | |
| $field-control-affixed-padding | |
| $field-control-filled-background | |
| $field-control-height | |
| $field-control-padding-bottom | |
| $field-control-padding-end | |
| $field-control-padding-start | |
| $field-control-padding-top | |
| $field-control-solo-background | |
| $field-control-solo-color | |
| $field-control-solo-elevation | |
| $field-control-solo-inverted-color | |
| $field-control-solo-inverted-focused-color | |
| $field-control-underlined-height | |
| $field-control-underlined-padding-bottom | |
| $field-disabled-color | |
| $field-error-color | |
| $field-focused-border-width | |
| $field-font-size | |
| $field-input-column-gap | |
| $field-input-min-height | |
| $field-input-opacity | |
| $field-input-padding-bottom | |
| $field-input-padding-top | |
| $field-input-row-gap | |
| $field-label-floating-scale | |
| $field-letter-spacing | |
| $field-max-width | |
| $field-outline-opacity | |
| $field-overlay-filled-opacity | |
| $field-overlay-focused-background-color | |
| $field-rounded-border-radius | |
| $field-subtle-transition-timing | |
| $field-transition-timing | |
| $field-underlined-margin-bottom | |