Директивы

Набор директив из Vuetify: v-ripple, v-intersect, v-resize, v-scroll, v-touch, v-mutate, v-click-outside. Регистрируются плагином app/plugins/directives.ts — доступны в любом шаблоне без импортов.

v-ripple — волна клика

Волна из точки нажатия; опция center: true — из центра. Цвет — currentColor элемента; при prefers-reduced-motion волна не создаётся.

Любой элемент

<CoreButton v-ripple>…</CoreButton>
<CoreButton v-ripple="{ center: true }">…</CoreButton>

v-intersect — видимость

Обёртка IntersectionObserver: колбэк (isIntersecting, entries, observer); observer.disconnect() из обработчика — одноразовое наблюдение. Порог 50%: карточка должна быть видна наполовину.

Прокрути до карточки — обработчик ещё не срабатывал

<div v-intersect="{ handler: onIntersect, options: { threshold: 0.5 } }">…</div>

function onIntersect(isIntersecting, entries, observer) {
  if (!isIntersecting) return
  // …
  observer.disconnect() // одноразовое наблюдение
}

v-resize — размеры окна

Вызов при монтировании и на каждый resize окна, не чаще раза на кадр (rAF-троттлинг). Поменяй размер окна — карточка обновится.

0 × 0 px

<div v-resize="onResize">…</div>

v-scroll — события скролла

Цель через аргумент (v-scroll:#panel) или значением; окно по умолчанию. Слушатель passive.

Ряд 1

Ряд 2

Ряд 3

Ряд 4

Ряд 5

Ряд 6

Ряд 7

Ряд 8

Ряд 9

Ряд 10

Ряд 11

Ряд 12

Ряд 13

Ряд 14

Ряд 15

Ряд 16

Ряд 17

Ряд 18

Ряд 19

Ряд 20

0 событий скролла панели

0 событий скролла окна

<div v-scroll:#panel="onScroll">…</div>
<div v-scroll="onWindowScroll">…</div>

v-touch — свайпы

Свайп — смещение больше 20 px по доминирующей оси (порог настраивается). Только touch-события: попробуй на тач-устройстве или в эмуляторе.

свайпни здесь

<div v-touch="{ left, right, up, down }">…</div>

v-mutate — мутации DOM

Обёртка MutationObserver: по умолчанию атрибуты, состав детей и текст собственных узлов. Добавь пункт — счётчик вырастет.

CoreButton
CoreCard
CoreTitle

0 мутаций

<ul v-mutate="onMutate">…</ul>

v-click-outside — клик вне элемента

pointerdown вне хоста закрывает панель; триггер исключён через include — клик по нему переключает, а не закрывает.

<div v-if="open" v-click-outside="{ handler: close, include: () => [trigger] }">…</div>

useGoTo — плавная прокрутка

Программная прокрутка с easing Vuetify: цель — px, селектор или элемент; offset — учёт sticky-хедера; prefers-reduced-motion — мгновенный прыжок.

const goTo = useGoTo()
goTo(0)                                  // окно → наверх
goTo('#section', { offset: -64 })        // цель-селектор, учёт sticky-хедера
goTo(300, { container: el })             // прокрутка внутри контейнера

useDisplay — вьюпорт и платформа

Брейкпоинты те же, что у CSS-утилит (sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536): JS-логика и вёрстка переключаются синхронно. Поменяй размер окна.

Вьюпорт: xl · 1280 × 784 px · десктопный

const display = useDisplay()
display.name   // 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
display.mobile // < md (768) — порог мобильной вёрстки
display.platform.ios