Как отключить вызов размытия активного элемента из SwiperJS в обработчике onTouchStart?

Можно ли отключить в активном элементе из SwiperJS в обработчике событий onTouchStart?

Немного предыстории:
Для сенсорных и настольных устройств я использую swiper для форм на swiper-слайдах. В форме я использую vue-select (поле со списком).
Проблема: когда пользователь выбирает запись, она выбирается не в первый раз, а во второй раз.

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div>First form</div>
      <v-select :options="selectionEntries"></v-select>
    </div>
    <div class="swiper-slide">
      <div>Second form</div>
      <v-select :options="selectionEntries"></v-select>
    </div>
  </div>
</div>

См. Также этот пример в codepen

Я понял, что вроде работает правильно:

  • Когда я удаляю Blur-listener в поле ввода поля vue-select. Но он используется для закрытия списка выбора, когда пользователь покидает поле.
  • Когда я комментирую
    swiper swiperjs vue-select
    person iBiber    schedule 10.12.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В настоящее время я использую этот обходной путь (SwiperJS V6.4.1):

const swiper = new Swiper(".swiper-container", {
  // Workaround part 1:
  touchStartPreventDefault: false
})
// Workaround part 2:
swiper.touchEventsData.formElements = 'notExistingHtmlTagName'

Часть 1: Для обработки событий щелчка мыши и нажатия на всех элементах установите параметр swiper touchStartPreventDefault: false. Это отключит этот блок кода: https://github.com/nolimits4web/swiper/blob/9dead9ef4ba5d05adf266deb7e3703ceb199a241/src/components/core/events/onTouchStart.js#L90-Lof97

Часть 2: Установите swiper.touchEventsData.formElements = 'undefined' для определения ничего как formElements. Это отключит блок кода, который вызывает размытие: https://github.com/nolimits4web/swiper/blob/9dead9ef4ba5d05adf266deb7e3703ceb199a241/src/components/core/events/onTouchStart.js#L81-

person iBiber    schedule 16.12.2020