Как использовать компонент vue -awesome-swiper только в мобильной сетке - PullRequest
Новая
       10

Как использовать компонент vue -awesome-swiper только в мобильной сетке

0 голосов
/ 29 мая 2020

У меня две bootstrap колонки с содержимым. В крупном масштабе столбцы занимают половину строки, а в мобильном масштабе столбцы получают всю ширину строки и располагаются друг над другом, как типичная сетка. Я хочу использовать vue -awesome-swiper в мобильной шкале, чтобы я мог пролистывать столбцы вместо прокрутки вниз до нижнего столбца. В то же время мне не нужен свайпер в большом масштабе, где столбцы умещаются в одну строку. Как мне его обогатить? Как использовать компонент vue -awesome-swiper только в мобильном масштабе и не использовать его в большом масштабе. Код для иллюстрации случая: 

<div class="row h-100">
   <div class="col gauche">
      <!-- Some content here -->
   </div>
   <div class="col gauche">
      <!-- Some content here -->
    </div>
</div>

С swiper: 

<div class="row h-100">
   <swiper class="swiper">
     <swiper-slide>
       <div class="col gauche">
          <!-- Some content here -->
       </div>
     </swiper-slide>
     <swiper-slide>
       <div class="col gauche">
          <!-- Some content here -->
       </div>
     </swiper-slide>
   </swiper>
</div>

1 Ответ

1 голос
/ 29 мая 2020

Простым решением этой проблемы (но не самым красивым) было бы использование Bootstrap s утилит отображения , чтобы определить, когда должен отображаться ваш слайдер и когда должны отображаться ваши столбцы.

Плохая часть этого решения - необходимость дважды определять ваш контент. Один раз для обычных столбцов и один раз для слайдов.

В приведенном ниже примере я «меняю местами» в точке останова md, но вы можете изменить это так, как вам нужно. 

<div class="row d-none d-md-flex">
  <div class="col-md-6" v-for="{ text } in items">
    <column-content :text="text"></column-content>
  </div>
</div>
<div class="row d-md-none">
  <div class="col-12">
    <swiper>
      <swiper-slide v-for="{ text } in items" class="px-2">
        <column-content :text="text"></column-content>
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</div>


Vue.use(VueAwesomeSwiper)

Vue.component('column-content', {
 template: '#column-content',
 props: ['text'],
 data() { return { text: '123'} }
})

new Vue({
  el: '#app',
  data() {
    return {
      items: [
       { 
        text: 'Some Text 1'
       },
       { 
        text: 'Some Text 2'
       },
      ]
    }
  }
})
<link href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/swiper@5.3.6/css/swiper.min.css" rel="stylesheet"/>

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@5.3.6/js/swiper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper"></script>


<div id="app">
  <div class="container">
    <div class="row d-none d-md-flex">
      <div class="col-md-6" v-for="{ text } in items">
        <column-content :text="text"></column-content>
      </div>
    </div>
    <div class="row d-md-none">
      <div class="col-12">
        <swiper>
          <swiper-slide v-for="{ text } in items" class="px-2">
           <column-content :text="text"></column-content>
          </swiper-slide>
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
      </div>
    </div>
  </div>
</div>



<template id="column-content">
 <div class="card">
  <div class="card-body">
   {{ text }}
  </div>
 </div>
</template>
...