v-touch-repeat повторяющиеся нажатия

v-touch-repeat — это директива Quasar, предназначенная для обработки повторяющихся касаний или нажатий на элементы интерфейса. Она полезна в ситуациях, когда требуется выполнение одного действия при удержании кнопки или повторяющихся нажатиях, например, увеличение/уменьшение значения счётчика, прокрутка списка, управление таймером и так далее.

Основной синтаксис

<q-btn 
  v-touch-repeat="increment"
  label="Увеличить"
  color="primary"
/>
  • v-touch-repeat="increment" — связывает функцию increment с повторяющимся касанием.
  • Поддерживаются как мышь, так и сенсорные устройства.
  • Поведение повторения настраивается через аргументы и модификаторы.

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

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

<q-btn 
  v-touch-repeat="{ handler: increment, interval: 200, delay: 500 }"
  label="Увеличить"
/>
  • handler — функция, которая будет вызываться при каждом срабатывании.
  • interval — время между повторными вызовами в миллисекундах (по умолчанию 100 мс).
  • delay — задержка перед началом повторений в миллисекундах (по умолчанию 400 мс).

При таком подходе первое нажатие срабатывает сразу, затем после delay начинается серия повторений с интервалом interval.

Модификаторы

Quasar предоставляет полезные модификаторы для v-touch-repeat:

  • mouse — активирует директиву для мыши (по умолчанию работает и для мыши, и для сенсорного экрана).
  • stop — предотвращает дальнейшее всплытие события.
  • prevent — предотвращает стандартное действие браузера, например, выделение текста при удержании кнопки.

Пример использования модификаторов:

<q-btn
  v-touch-repeat.mouse.stop.prevent="increment"
  label="Увеличить"
/>

Работа с объектной записью

Для более гибкого управления можно использовать объект с несколькими параметрами:

<q-btn
  v-touch-repeat="{
    handler: increment,
    interval: 150,
    delay: 300,
    stop: true,
    prevent: true
  }"
  label="Увеличить"
/>

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

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

1. Инкремент/декремент значения

<template>
  <div>
    <q-btn v-touch-repeat="{ handler: increment, interval: 100 }" label="+" />
    <span>{{ counter }}</span>
    <q-btn v-touch-repeat="{ handler: decrement, interval: 100 }" label="-" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    increment() {
      this.counter++
    },
    decrement() {
      this.counter--
    }
  }
}
</script>

2. Автопрокрутка списка

<q-scroll-area style="height: 200px; width: 200px;">
  <div
    v-touch-repeat="{ handler: scrollUp, interval: 50 }"
    style="height: 20px; background: #ccc; cursor: pointer"
  >▲</div>

  <div v-for="i in 50" :key="i">{{ i }}</div>

  <div
    v-touch-repeat="{ handler: scrollDown, interval: 50 }"
    style="height: 20px; background: #ccc; cursor: pointer"
  >▼</div>
</q-scroll-area>

<script>
export default {
  methods: {
    scrollUp() {
      const scrollArea = this.$el.querySelector('.q-scrollarea__scroll-content')
      scrollArea.scrollTop -= 10
    },
    scrollDown() {
      const scrollArea = this.$el.querySelector('.q-scrollarea__scroll-content')
      scrollArea.scrollTop += 10
    }
  }
}
</script>

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

  • Поддержка сенсорных экранов и мыши делает v-touch-repeat универсальной для мобильных и десктопных приложений.
  • Минимальная задержка и короткий интервал могут создавать излишнюю нагрузку на рендер, особенно при сложных методах. Рекомендуется подбирать значения delay и interval с учётом производительности.
  • Директива может комбинироваться с любыми компонентами Quasar (q-btn, q-icon, div и т.д.).
  • Для длительных операций стоит предусмотреть проверку на завершение предыдущей итерации, чтобы избежать конфликтов при слишком частых повторениях.

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

Оглавление