Как уничтожить слайдер vue-awesome-swiper в vue.js?

Мне нужно уничтожить vue-awesome-swiper на рабочем столе и оставить на экране планшета. точно уничтожить, а не отключить свайп. Но могу ли я уничтожить Swiper? В директиве: параметры, которые я передаю, и свайпер тегов компонентов будет работать в любом случае. Только без переданных параметров

   <template lang="pug">
    .app
      swiper(:options="swiperOptions")
        swiper-slide(
          v-for="(slide, idx) in slides"
          :key="idx"
          )

    <script>

    import { swiper, swiperSlide } from 'vue-awesome-swiper'

    export default {
      name: 'MySlider',
      components: {
        swiper,
        swiperSlide
      },
      data() {
        return {
          slides: [
            {
              title: 'Заголовок 1',
              img: 'title.jpg',
            },
            {
              title: 'title2',
              img: 'slide2.jpg',
            },
            {
              title: 'title3',
              img: 'slide3.jpg',
            }
        ],
          swiperOptions: {
            slidesPerView: 5,
            spaceBetween: 21,
            // allowTouchMove: false,
            breakpoints: {
              992: {
                slidesPerView: 3,
                spaceBetween: 25,
              },
              768: {
                slidesPerView: 3.7,
                spaceBetween: 22,
              },
              640: {
                slidesPerView: 2.2,
                spaceBetween: 15,
                initialSlide: 0,
                centeredSlides: false,
              }
            },
          },
        }
      },

person Sasha726    schedule 29.05.2020    source источник


Ответы (1)


Как насчет использования v-if в элементе swiper, чтобы он не отображался при просмотре на рабочем столе?

Вы должны создать метод, который определяет, является ли клиент настольным компьютером или планшетом, и передает результат в атрибут v-if.

person Cambrian Dream    schedule 29.05.2020
comment
Привет! Да, пробовал. Но в этом случае свайпер-слайд будет скрыт, потому что он внутри свайпера. - person Sasha726; 29.05.2020
comment
Тогда я думаю, что вы можете отключить свайп только до тех пор, пока свайпер-слайд находится внутри свайпера. - person Cambrian Dream; 29.05.2020
comment
А как насчет создания еще одного элемента без свайпера? Вы бы использовали этот элемент только для планшета. - person Cambrian Dream; 29.05.2020
comment
да. Считаю это более подходящим решением. Чтобы создать еще один элемент без свайпера. Большое спасибо! - person Sasha726; 29.05.2020