VFileInput 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. | ||
| 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. | ||
| chips | ||
| Changes display of selections to chips. | ||
| 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 . | ||
| counter | ||
| Displays the number of selected files. | ||
| counter-size-string | ||
| The text displayed when using the counter and show-size props. Can also be customized globally on the internationalization page . | ||
| counter-string | ||
| The text displayed when using the counter prop. Can also be customized globally on the internationalization page . | ||
| 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 | ||
| 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-input | ||
| Display the icon only without the input (file names). | ||
| 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-value | ||
| The v-model value of the component. If component supports the multiple prop, this defaults to an empty array. | ||
| multiple | ||
| Adds the multiple attribute to the input, allowing multiple file selections. | ||
| 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-hint | ||
| Forces hint to always be visible. | ||
| 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 . | ||
| 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. | ||
| show-size | ||
| Sets the displayed size of selected file(s). When using true will default to 1000 displaying (kB, MB, GB) while 1024 will display (KiB, MiB, GiB). | ||
| 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. | ||
| validate-on | ||
| Removes any applied border-radius from the component. | ||
| 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. |
| selection |
| Slot for defining a custom appearance for selected item(s). Provides the current index, text (truncated) and file . |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $file-input-chip-margin-inline-end | |
| $file-input-chips-margin-bottom | |
| $file-input-chips-margin-top | |
| $file-input-details-padding-inline | |