04 | Vue 3 — Лоадер и пагинация

Ссылка на репозиторий: https://github.com/vvlstl/start-vue В этом видео добавляем лоадер и пагинацию и приводим интерфейс к нормальному пользовательскому виду. Сначала я сделаю простой лоадер: создам отдельный Vue-компонент Loader, сверстаю его на Less, вынесу анимации в отдельный файл, подключу стили в общий бандл. Чтобы наглядно увидеть работу лоадера, добавлю искусственную задержку перед основным запросом в сторе. Так сразу видно, когда данные загружаются и как UI на это реагирует. Дальше переходим к пагинации: подключаем библиотеку vue-awesome-paginate, добавляем параметры пагинации в Pinia store (currentPage, totalElements, limit), изменяем запрос к API, чтобы он работал с offset и limit, рассчитываем offset на основе текущей страницы. После этого пагинация появляется, но без стилей — и тут начинается самое интересное. Я покажу, как: обернуть сторонний компонент в свой Vue-компонент, прокидывать все параметры через v-bind="$attrs", переотправлять события наружу через @click="$emit('click', $event)", и управлять внешним видом кнопок через пропсы. В итоге у нас получается: аккуратный лоадер, рабочая пагинация, чистая интеграция сторонней библиотеки, и понятная схема, как расширять и кастомизировать чужие компоненты без правок в их коде. Это видео про реальный UI и реальные задачи, с которыми сталкиваются почти в каждом Vue-приложении. ========================== СберЧаевые: https://pay.mysbertips.ru/68417675 ЮMoney https://yoomoney.ru/to/4100119344119969