Upload
Компонент Upload предоставляет функциональность загрузки файлов через скрытый <input type="file">. Использует слот для кастомного триггера, что позволяет полностью контролировать внешний вид кнопки загрузки.
Обзор
- Основное назначение: загрузка одного или нескольких файлов с кастомным интерфейсом.
- Ключевые возможности:
- Одиночная и множественная загрузка файлов.
- Кастомный триггер через слот.
- Ограничение типов файлов через
accept. - Захват медиа с камеры/микрофона через
capture. - Блокировка (
disabled). - Публичный метод
reset()для сброса. - Поддержка
v-model.
API компонента
Props
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
modelValue | File | Array | Выбранный файл или массив файлов (v-model). | |
accept | String | Строка с допустимыми типами файлов (например, 'image/*', '.pdf,.doc'). | |
multiple | Boolean | false | Разрешает выбор нескольких файлов. |
disabled | Boolean | false | Блокирует возможность открытия диалога выбора файла. |
capture | String | Указывает источник захвата медиа. Возможные значения: 'user', 'environment'. | |
name | String | HTML-атрибут name для поля ввода. | |
form | String | Идентификатор формы, с которой связано поле. | |
inputProps | Object | {} | Дополнительные атрибуты для скрытого <input type="file">. |
События
| Событие | Параметр | Описание |
|---|---|---|
update:modelValue | File | Array | Вызывается при выборе файла(ов). |
change | File | Array | Вызывается при изменении выбранных файлов. |
Методы (через expose)
| Метод | Описание |
|---|---|
reset() | Сбрасывает выбранные файлы и очищает значение input. |
Слоты
| Имя слота | Пропсы слота | Описание |
|---|---|---|
default | { onClick: Function, disabled: Boolean, value: File | Array } | Кастомный триггер для открытия диалога выбора файла. |
Особенности работы
- Скрытый input: нативный
<input type="file">скрыт черезdisplay: none. Клик по нему программно вызывается методомhandleClick. - Слот: предоставляет пропсы
onClick,disabledиvalueдля создания кастомного интерфейса. - Сброс: метод
reset()очищает значение input и эмититnull.