Рубрика: Vue

Со временем многие Vue-компоненты превращаются в мини-приложения. Они загружают данные, делают запросы, хранят бизнес-логику, управляют состоянием и одновременно отвечают за отображение. Проблема становится заметна, когда один и тот же интерфейс нужно использовать в другом месте. Вместо переиспользования приходится копировать код…

При разработке фильтров товаров, недвижимости или объявлений часто возникает задача выбора диапазона значений. Например, пользователь хочет указать цену от 10 000 до 50 000 рублей. Первое желание — подключить готовую библиотеку. Но если нужен простой и легковесный компонент, двухползунковый слайдер…

В интерфейсах постоянно повторяется один и тот же паттерн:что-то должно появиться поверх страницы — сбоку, снизу или на весь экран. Обычно это реализуют по-разному: В итоге — куча дублирующегося кода. А можно сделать один универсальный компонент, который покрывает всё это.…

В веб-разработке есть класс багов, которые сложно объяснить, но легко увидеть: Во многих случаях причина одна —👉 код выполняется раньше, чем браузер завершил первый рендер В этой статье разберём простой паттерн, который решает эту проблему — DeferRender. 🚧 Проблема: неправильный…

В интерфейсах постоянно приходится переключать состояние: Обычно это делают через v-if. И обычно это выглядит… плохо. Резкий скачок, дергается высота, ломается восприятие. В этой статье разберём простой, но мощный паттерн — анимированный переключатель контента, который делает интерфейс заметно приятнее. 🧩…

В веб-интерфейсах постоянно встречаются зоны со скроллом: И у всех них есть одна и та же проблема: 👉 пользователь не всегда понимает, что блок можно прокрутить Скролл есть, но визуально это никак не обозначено.Особенно если скроллбар скрыт или минималистичный. 🎯…

В предыдущей статье мы разобрали “умный sticky” через смещение (top: -offset).Этот подход позволяет сохранить один скролл страницы и аккуратно обрабатывать длинный контент. Но это не единственный способ. Иногда хочется: В таких случаях можно пойти другим путём и реализовать sticky-поведение вручную…

В первом варианте мы реализовали “умный sticky” через отслеживание скролла и накопление смещения (delta). Это даёт полный контроль, но у такого подхода есть особенность: положение сайдбара зависит не только от текущего scroll, но и от его истории Иногда это нормально,…

position: sticky — одна из тех вещей, которые кажутся идеальными…пока не начинаешь использовать их в реальном интерфейсе. Особенно если у тебя: В какой-то момент всё начинает ломаться. В этой статье разберём решение:👉 sticky-блок с “внутренней прокруткой” без overflow: auto ❌…