Плитки с фото

Пора за новый проект! В этом мини-проекте пригодятся три последних урока: компоненты с пропсами, события и слоты. Как и в прошлых мини-проектах, в задании сказано, что должна делать страница, а как это написать — решать вам. Каждое упражнение продолжает предыдущее.

Проект. Галерея фотографий из поездки в Шотландию. Фото лежат плитками в сетке, а щелчок по плитке показывает фото крупно, поверх всей страницы и с подписью — пока вы его не закроете. За три упражнения вы сделаете плитки, затем большой просмотр и, наконец, кнопки для перехода к следующему и предыдущему фото. Вместо настоящих фотографий в галерее крупные эмодзи на цветных плитках, поэтому файлы с картинками не нужны. В настоящей галерее вместо них был бы <img :src="photo.src">.

Данные. Фото лежат в файле photos.json, для каждого — объект:

{ "id": 1, "emoji": "🏔️", "caption": "Над облаками", "place": "Бен-Невис", "color": "#cfe3f5" }

В App.vue они уже подключены: import photos from "./photos.json"; даёт ему массив, который лежит в файле. (Проект, собранный с помощью Vite, умеет так импортировать JSON-файлы.)

Задание. Напишите компонент PhotoTile.vue, который показывает одно фото, переданное ему в пропе photo. В его шаблоне — button с классом tile: плитку нужно нажимать, а кнопку можно нажать и с клавиатуры. В кнопке покажите эмодзи в span с классом emoji, а под ним — подпись. Фон плитки — цвет фото. Стили уже готовы в <style scoped> компонента. В App.vue покажите плитку для каждого фото в div с классом grid.

Затем щелчок по плитке выбирает её фото: плитка отправляет событие select, а App.vue запоминает, какое фото выбрано. У плитки выбранного фото есть класс selected, который даёт ей зелёную рамку. Одновременно выбрано только одно фото. В следующем упражнении выбранное фото будет показано крупно.

Совет: плитка не знает, какое фото выбрано, — это знает App.vue. Поэтому плитка получает это от App.vue во втором пропе, например selected, со значением true или false. А App.vue может запоминать позицию фото в массиве — её даёт v-for: (photo, index) in photos. Это пригодится в последнем упражнении.