v-touch

Компонент v-touch предоставляет гибкий способ обработки сенсорных событий в приложениях на Vuetify. Он предназначен для перехвата жестов пользователя, таких как свайпы, касания и движения пальцев по экрану, и позволяет реализовать интерактивное поведение без необходимости напрямую работать с низкоуровневыми событиями браузера.

v-touch может использоваться как оболочка для других компонентов. События, определённые внутри v-touch, автоматически реагируют на взаимодействие пользователя с вложенными элементами.

Синтаксис и базовое использование

Базовая структура компонента выглядит так:

<v-touch
  @swipe.left="onSwipeLeft"
  @swipe.right="onSwipeRight"
  @tap="onTap"
>
  <v-card>
    Контент, реагирующий на жесты
  </v-card>
</v-touch>

Основные моменты:

  • @swipe.left и @swipe.right — обработчики свайпов влево и вправо.
  • @tap — событие одиночного касания.
  • v-touch может быть обёрткой для любых компонентов Vuetify или HTML-элементов.

Поддерживаемые события

Компонент предоставляет следующие ключевые события:

  1. tap — одиночное касание по экрану.
  2. doubletap — двойное касание.
  3. longpress — длительное удержание пальца на элементе.
  4. swipe — движение пальца в определённом направлении. Направления можно уточнять: left, right, up, down.
  5. pan — перемещение пальца по экрану, включая смещение и скорость.

Пример обработки нескольких направлений свайпа:

<v-touch
  @swipe.left="onSwipeLeft"
  @swipe.right="onSwipeRight"
  @swipe.up="onSwipeUp"
  @swipe.down="onSwipeDown"
>
  <div>Свайпы во всех направлениях</div>
</v-touch>

Использование с объектом жеста

События swipe и pan могут возвращать объект с параметрами движения:

methods: {
  onSwipeLeft(event) {
    console.log(event.direction)   // направление свайпа
    console.log(event.distance)    // расстояние в пикселях
    console.log(event.deltaX)      // смещение по X
    console.log(event.deltaY)      // смещение по Y
  }
}

Ключевые свойства объекта события:

  • direction — направление движения (left, right, up, down).
  • distance — пройденное расстояние в пикселях.
  • deltaX, deltaY — смещения по осям X и Y.
  • velocity — скорость жеста, полезна для анимаций и кинетики.

Настройка чувствительности жестов

v-touch позволяет настраивать пороги для событий:

<v-touch
  :swipe-threshold="100"
  :long-press-duration="700"
  @swipe.right="onSwipeRight"
  @longpress="onLongPress"
>
  <v-card>Настраиваемые пороги</v-card>
</v-touch>
  • swipe-threshold — минимальное расстояние для распознавания свайпа (по умолчанию 30px).
  • long-press-duration — время удержания для распознавания длительного нажатия (в миллисекундах, по умолчанию 500ms).

События Pan и Pinch

Помимо простых свайпов и тапов, v-touch поддерживает панорамирование и масштабирование:

<v-touch
  @pan="onPan"
  @pinch="onPinch"
>
  <v-img src="image.jpg"></v-img>
</v-touch>

Объект события для pan включает:

  • deltaX и deltaY — смещения по осям.
  • direction — направление движения.
  • distance — пройденное расстояние.

Объект события для pinch содержит:

  • scale — коэффициент масштабирования.
  • velocity — скорость жеста.
  • center — координаты центра жеста.

Комбинирование событий

v-touch позволяет комбинировать несколько событий на одном элементе:

<v-touch
  @tap="onTap"
  @doubletap="onDoubleTap"
  @swipe.left="onSwipeLeft"
  @longpress="onLongPress"
>
  <v-card>Многоуровневая реакция на жесты</v-card>
</v-touch>

При этом важно учитывать приоритет событий:

  • longpress срабатывает только при удержании.
  • tap и doubletap могут конфликтовать, поэтому часто применяют задержку для различения одиночного и двойного касания.

Интеграция с Vuex и анимациями

v-touch удобно использовать для обновления состояния через Vuex или для управления анимациями:

methods: {
  onSwipeLeft() {
    this.$store.commit('nextSlide')
  },
  onSwipeRight() {
    this.$store.commit('previousSlide')
  },
  onPan(event) {
    this.translateX = event.deltaX
  }
}

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

Особенности и рекомендации

  • v-touch работает только на устройствах с сенсорным экраном, но также корректно обрабатывает события мыши.
  • Для сложных жестов (например, многопальцевых) рекомендуется использовать pinch и rotate.
  • Для предотвращения конфликта с прокруткой страницы можно применять @pan.prevent.
  • Для производительных приложений лучше избегать чрезмерного количества вложенных v-touch, так как каждый компонент добавляет обработчики событий.

Примеры продвинутого использования

Галерея изображений с свайпами и зумом:

<v-touch
  @swipe.left="nextImage"
  @swipe.right="prevImage"
  @pinch="onPinch"
>
  <v-img :src="currentImage"></v-img>
</v-touch>

Свайп для удаления элемента списка:

<v-touch
  @swipe.left="removeItem(item.id)"
>
  <v-list-item>{{ item.text }}</v-list-item>
</v-touch>

Длительное удержание для показа меню действий:

<v-touch
  @longpress="showContextMenu(item.id)"
>
  <v-card>{{ item.name }}</v-card>
</v-touch>

Эти паттерны позволяют создавать мобильные и веб-интерфейсы с привычной пользователю интерактивностью, используя исключительно средства Vuetify и Vue.js.

Оглавление