https://github.com/povar0305/file-input

Vue компонент инпута загрузки файлов
https://github.com/povar0305/file-input

composition-api input ts vue3

Last synced: about 2 months ago
JSON representation

Vue компонент инпута загрузки файлов

• Host: GitHub
• URL: https://github.com/povar0305/file-input
• Owner: povar0305
• Created: 2024-04-01T09:39:20.000Z (9 months ago)
• Default Branch: master
• Last Pushed: 2024-04-14T07:16:09.000Z (9 months ago)
• Last Synced: 2024-04-15T04:31:51.622Z (9 months ago)
• Topics: composition-api, input, ts, vue3
• Language: Vue
• Homepage:
• Size: 414 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Компонент загрузки файлов

![image](https://github.com/povar0305/file-input/assets/73982948/55ccd7dc-2d82-45bd-82b9-d9ad277802b9)

Установка и запуск одной командой ``` npm run start ```.

[Фигма](https://www.figma.com/file/dmSqtmI03pj0BjCM6iTZfU/%D0%A2%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D0%BE%D0%B5.-File-Input?type=design&node-id=0-1&mode=design&t=dAEbc6kE67j9ZwSc-0)

Было сделано 2 компонента - кнопка и инпут загрузки файла.

Кнопка принимает пропсом свойство disabled(не обязательное, по дефолту false).

Инпут загрузки файлов принимает:

* disabled (не обязательное) - дизаблим ли инпут, boolean

* label (не обязательное) - надпись над инпутом. string

* hint (не обязательное) - текст под инпутом, string

* error (не обязательное) - текст ошибки, string

* multiple (не обязательное, по дефолту false) - можно ли загружать несколько файлов, boolean

* accept (не обязательное, по дефолту image/*) - тип ожидаемых файлов, string

Инпут загрузки эмитит:

* select-file - эмитит выбранный файл, в момент выбора файла пользователем

* succes-send - успешна загрузка файла на сервер. Сейчас так как нет бека, файл загружается по заглушке.

* error-send - ошибка при загрузки файла на сервер

* cancellation - отмена загрузки

* delete - удаление файла из инпута