Touch события

Element Plus предоставляет удобный механизм работы с touch-событиями, что особенно важно для разработки интерфейсов, оптимизированных под мобильные устройства и сенсорные экраны. Библиотека интегрирует поддержку свайпов, тапов и других жестов через компоненты и директивы, упрощая обработку взаимодействия пользователя с элементами интерфейса.

Основные события

В Element Plus основными touch-событиями являются:

  • touchstart — возникает при начале касания экрана.
  • touchmove — возникает при движении пальца по экрану.
  • touchend — возникает при завершении касания.
  • touchcancel — возникает, когда касание прерывается системой (например, при поступлении системного уведомления).

Эти события передаются компонентам как стандартные события Vue. В отличие от нативного JavaScript, Element Plus позволяет связывать их с методами компонентов через директивы и слушатели событий.

Директива v-touch

Element Plus включает встроенную директиву v-touch, которая упрощает настройку реакций на сенсорные события. Основной синтаксис:

<template>
  <div v-touch:swipe.left="onSwipeLeft"
       v-touch:swipe.right="onSwipeRight"
       v-touch:tap="onTap">
    Сенсорная область
  </div>
</template>

<script>
export default {
  methods: {
    onSwipeLeft() {
      console.log('Свайп влево');
    },
    onSwipeRight() {
      console.log('Свайп вправо');
    },
    onTap() {
      console.log('Одиночное касание');
    }
  }
}
</script>

Особенности работы директивы:

  • Поддерживаются свайпы в четырёх направлениях: left, right, up, down.
  • Событие tap срабатывает при кратковременном касании без движения.
  • Событие longtap позволяет реализовать удержание пальца на элементе.

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

Для точной настройки поведения свайпов используется объект опций при регистрации директивы:

app.directive('touch', {
  beforeMount(el, binding) {
    el._touchOptions = {
      threshold: 20,   // Минимальное расстояние свайпа в пикселях
      time: 500        // Максимальное время свайпа в миллисекундах
    };
  }
});
  • threshold — минимальная длина движения пальца, после которой событие считается свайпом.
  • time — максимальная длительность свайпа для корректного срабатывания события.

Использование с компонентами Element Plus

Touch-события особенно полезны в интерактивных компонентах:

  • Carousel — поддерживает свайпы для перелистывания слайдов.
  • Drawer — открытие и закрытие с жестами.
  • Tabs — переключение вкладок через свайп.
  • Dialog — возможность закрытия свайпом вниз на мобильных устройствах.

Пример интеграции свайпа с el-carousel:

<template>
  <el-carousel v-touch:swipe.left="nextSlide" v-touch:swipe.right="prevSlide">
    <el-carousel-item v-for="item in items" :key="item.id">
      {{ item.content }}
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  data() {
    return { items: [{id:1,content:'A'},{id:2,content:'B'}] };
  },
  methods: {
    nextSlide() { this.$refs.carousel.next(); },
    prevSlide() { this.$refs.carousel.prev(); }
  }
}
</script>

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

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

  • Сочетание tap и longtap для различения краткого и долгого нажатия.
  • Использование swipe вместе с touchmove для контроля динамических жестов.

Пример:

<div v-touch:tap="onTap" v-touch:longtap="onLongTap" v-touch:swipe.up="onSwipeUp">
  Жестовая панель
</div>

<script>
export default {
  methods: {
    onTap() { console.log('Короткое касание'); },
    onLongTap() { console.log('Долгое удержание'); },
    onSwipeUp() { console.log('Свайп вверх'); }
  }
}
</script>

Рекомендации по производительности

  • Не навешивать обработчики на слишком большое количество элементов одновременно.
  • Использовать делегирование событий при работе с динамически создаваемыми списками.
  • Ограничивать частоту обработки touchmove с помощью requestAnimationFrame или throttle, чтобы избежать лагов на мобильных устройствах.

Интеграция с кастомными компонентами

Для собственных компонентов можно подключать touch-события через директиву v-touch или напрямую через обработчики @touchstart, @touchmove и @touchend:

<template>
  <div @touchstart="start" @touchmove="move" @touchend="end">
    Кастомный жест
  </div>
</template>

<script>
export default {
  methods: {
    start(e) { this.startX = e.touches[0].clientX; },
    move(e) { this.deltaX = e.touches[0].clientX - this.startX; },
    end() {
      if (this.deltaX > 50) console.log('Свайп вправо');
      else if (this.deltaX < -50) console.log('Свайп влево');
    }
  }
}
</script>

Это позволяет точно контролировать логику жестов и интегрировать их в сложные интерфейсы.

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

Оглавление