В этой короткой статье я покажу вам, как создать компонент перетаскивания с помощью Vue.js и Tailwindcss.

Предварительный просмотр

ссылка: Flash-код

Начнем с пользовательского интерфейса:

Мы поместим один div с несколькими классами попутного ветра:

Что делают эти классы css:

  • bg-grey-200, rounded-lg, border-2, border-daded и border-grey-500: это классы Tailwindcss. Они говорят сами за себя, но если вам нужна дополнительная информация, вы можете ознакомиться с документами Tailwind.
  • dropzone: задает ширину 400 пикселей и высоту 500 пикселей.

И вот что мы получаем:

Теперь давайте добавим текст внутри. Мы можем сделать это, просто добавив еще один div внутрь первого.

Все классы css взяты из Tailwindcss, за исключением dropzone-child-elements. Этот класс запрещает пользователю взаимодействовать с содержимым внутри dropzone и содержит только одно правило:
указатель -события: нет;

Вот как это выглядит:

Пришло время заставить его что-то делать (логика):

1-Изменить цвет границы при перетаскивании файла:
Во-первых, давайте сделаем зону перетаскивания интерактивной, изменив цвет границы при перетаскивании файла. Мы будем использовать dragenter и dragleave, чтобы определить, находится ли файл над областью перетаскивания. Мы будем использовать переменную с именем fileOverDropArea для управления цветом границы.

Позвольте мне объяснить, как это работает:
Этот код устанавливает для fileOverDropArea значение true или false, когда файл входит или выходит из раскрывающегося списка.
.prevent отменяет действия по умолчанию при запуске этих событий.

Благодаря Vue мы можем привязать атрибут класса, чтобы добавить некоторые классы только при соблюдении определенных условий. В этом случае мы устанавливаем цвет границы на темно-серый, если fileOverDropArea равно false, и на красный, если true.

2 – Обработка загрузки файла.
Теперь, когда анимация при наведении работает, давайте займемся частью загрузки файла.
На самом деле это самая простая часть, все, что нам нужно сделать. нужно прослушивать другое событие с именем drop, а затем вызывать метод при запуске события.
Для этого мы добавим эту строку кода в div dropzone:

Это код метода dropFile:

Полный код компонента:

Коротко об этой серии:

Flash Code – это серия сообщений, в которых показано, как создавать различные компоненты с помощью Vuejs. Это был первый пост, и многие из них появятся в ближайшие недели.
Мне бы хотелось услышать ваше мнение об этом первом посте (на самом деле это мой первый пост в блоге).
Спасибо за чтение.

Вы можете прочитать эту статью на сайте Dev.to: Ссылка