Vue / Vuetify упаковка в столбцы на основе экрана - PullRequest
Новая
       3

Vue / Vuetify упаковка в столбцы на основе экрана

0 голосов
/ 12 февраля 2020

У меня есть родительский компонент, внутри которого я использую v-for для рендеринга компонента product-box в зависимости от количества продуктов. Прямо сейчас, если у меня есть 200 продуктов, они просто складывают один поверх другого, что увеличивает длину страницы следующим образом: 

[box]
[box2]
[box3]
[box4]
--page bottom--

Вместо того, чтобы длина страницы продолжала увеличиваться, могу ли я получить ее там, где она есть? переносится в зависимости от размера окна следующим образом: 

[box1]  [box3]
[box2] [box4]
--page bottom--

или, если я перемещаю экран еще меньше: 

[box1]  [box2] [box3] [box4]
--page bottom--

Родительский компонент 

<div>
    <product-box 
        v-for="(product,index) in this.$store.getters.getProducts"
        :key="index"
        :product = product
    >
    </product-box>
</div>

ProductBox. vue

<template>
    <div class='products-box-component'>
        <v-row>
            <v-col cols="12">
                <v-row
                >
                    <v-col cols="2" :class="{'products-box': true}">
                            <div class="image-container">
                            </div>
                            <div class="info-container">
                            </div>
                    </v-col>
                </v-row>
            </v-col>
        </v-row>
    </div>
</template>

1 Ответ

1 голос
/ 12 февраля 2020

Я не использовал компонент, который вы сейчас используете. Я думаю, рассмотреть вопрос об использовании grid макет. 

.app-list-container {
  // grid http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
  width: 100%;
  display: grid;
  justify-content: space-around;
  // justify-content:center;
  justify-items: center;
  align-items: center;
  grid-template-columns: repeat(auto-fill, 60px);
  grid-template-rows: repeat(auto-fill, 60px);
   // grid-row-gap: 10px;
   // grid-column-gap: 10px;
 }
<div class='app-list-container'>
  <div v-for="(product,index) in this.$store.getters.getProducts"
      :key="index"
      class="app-item"
      >
  </div>
</div>

CSS 来 搞定

...