v-touch-hold длительное нажатие

v-touch-hold — это директива в Quasar Framework, предназначенная для обработки событий длительного нажатия на элемент. Она позволяет реагировать на удерживание пользователем элемента, что особенно полезно для мобильных интерфейсов, сенсорных панелей и интерактивных элементов, где краткое нажатие и удержание могут выполнять разные действия.

Подключение и использование

Для использования v-touch-hold необходимо добавить директиву к элементу в шаблоне Vue:

<q-btn 
  label="Удерживать меня" 
  v-touch-hold="onHold">
</q-btn>

Здесь onHold — метод, который будет вызван после установленного времени удержания. По умолчанию время срабатывания составляет 600 мс, но его можно изменить через аргумент :duration.

<q-btn 
  label="Удерживать меня 1 сек" 
  v-touch-hold="{ handler: onHold, duration: 1000 }">
</q-btn>

Аргументы директивы

v-touch-hold поддерживает несколько ключевых аргументов в виде объекта:

  • handler (Function) — функция, которая вызывается при успешном длительном нажатии.
  • duration (Number, мс) — время удержания до срабатывания события. По умолчанию 600.
  • interval (Number, мс) — интервал повторного вызова обработчика при удержании элемента. Полезно для создания автоповторяющихся действий.
  • mouse (Boolean) — разрешает обработку удержания с помощью мыши. По умолчанию false, активируется только для сенсорных устройств.
  • prevent (Boolean) — предотвращает стандартное поведение браузера при удержании (например, контекстное меню).

Пример с интервалом и предотвращением стандартного действия:

<div 
  v-touch-hold="{ handler: repeatAction, duration: 500, interval: 200, prevent: true }"
>
  Нажимай и держи
</div>
methods: {
  repeatAction() {
    console.log('Длительное нажатие срабатывает каждые 200 мс');
  }
}

События и методы

v-touch-hold генерирует только одно основное событие: вызов обработчика handler. Однако можно комбинировать его с другими событиями для более сложного поведения.

Например, можно различать обычное нажатие и длительное удержание:

<q-btn
  label="Нажми или удерживай"
  @click="simpleClick"
  v-touch-hold="{ handler: longHold, duration: 800 }"
/>
methods: {
  simpleClick() {
    console.log('Короткое нажатие');
  },
  longHold() {
    console.log('Длительное удержание');
  }
}

Такой подход позволяет создавать интерактивные кнопки с разным поведением в зависимости от времени нажатия.

Практические применения

  • Меню быстрого доступа: удерживание элемента вызывает расширенное меню опций.
  • Редактирование контента: нажатие и удержание запускает режим редактирования, а короткое нажатие — выбор элемента.
  • Игровые интерфейсы: удержание кнопки увеличивает скорость действия или активирует особую функцию.
  • Автоповтор действия: удержание кнопки + интервал для увеличения числовых значений или прокрутки.

Особенности работы на разных устройствах

  • На мобильных устройствах директива работает естественно с касаниями.
  • На десктопе использование свойства mouse: true позволяет симулировать длительное нажатие мышью.
  • Предотвращение стандартного контекстного меню с помощью prevent: true обеспечивает корректное поведение на мобильных браузерах, где удержание обычно вызывает всплывающее меню.

Советы по оптимизации

  • Не устанавливать слишком короткую длительность удержания (<200 мс), чтобы не вызывать случайные срабатывания.
  • Использовать interval для автоповтора только при необходимости, так как частый вызов обработчика может создавать нагрузку.
  • Для универсальных компонентов учитывать различие между touch и mouse событиями, чтобы интерфейс был одинаково удобен на всех устройствах.

Заключение по функционалу

v-touch-hold — мощный инструмент Quasar для работы с длительными нажатиями. Его гибкость и настраиваемость делают возможным создание как простых интерактивных элементов, так и сложных компонентов с повторяющимися действиями, разным поведением при коротком и длинном нажатии, а также адаптацию под мобильные и десктопные устройства.

Оглавление