如何使用 Vuetify 网格系统循环显示卡片组件？

Posted 2023-02-22

【中文标题】如何使用 Vuetify 网格系统循环显示卡片组件？

【英文标题】：How to display card components in loop with Vuetify grid system?

【发布时间】：2018-03-31 13:54:42

【问题描述】：

注意：使用 Vue.js 和 Vuetify.js 实现功能和样式

我有使用v-for 动态生成的卡片组件，我想根据屏幕尺寸 (sm/md/lg) 将它们显示在 1/3/4 个卡片中。当我将它们放在 Vuetify 的网格系统中时，带有 v-flex 和 v-layout 元素，卡片被最小化，而不是移动到第二行。

还有其他方法可以解决这个问题吗？

<v-content>
  <v-card class="d-inline-flex" v-for="company of companies" :key="company.name">
    <v-layout >
      <v-flex md6 lg6>
        <img class="company-logo" src="../assets/img/example-logo.png" >
      </v-flex>
      <v-flex md6 lg6>
        <v-card-title class="headline pl-0">company.name</v-card-title>
        <article class="text-md-left text-lg-left">
          <v-btn @click="selectDashboard(href('stats', company.name))" :value="company.name"><v-icon>local_offer</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('process', company.name))" :value="company.name"><v-icon>notifications</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('example', company.name))" :value="company.name"><v-icon>rate_review</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('alerts', company.name))" :value="company.name"><v-icon>explore</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('profile', company.name))" :value="company.name"><v-icon>room</v-icon></v-btn>
        </article>
      </v-flex>
    </v-layout>
  </v-card>
</v-content>

对于视觉效果，此代码笔显示图像宽度尺寸减小（但高度尺寸保持不变）-https://codepen.io/johnjleider/pen/aLXBez?editors=1111

【参考方案1】：

接受的答案对我来说不适用于 v2 的 Vuetify。

现在我们可以使用<v-col>，您可以执行以下操作。

<v-row>
    <v-col cols="12" sm="3" md="4" v-for="(something, index) in somethingsArray" :key="index" >
        <my-component :my-data="something" />
    </v-col>
</v-row>

其中cols="12" 与xs="12" 相同，并且该列将占用全部12 个空格。

尺寸从最小的屏幕开始放大。然后在小屏幕上，每列将占用 4 个空格，从而产生 3 列，然后对于中型和更大的屏幕，使用 3 个空格，从而产生 4 列。

|__|__|__|__|__|__|__|__|__|__|__|__|  12 spaces in the grid
|-----------------------------------|  <-cols=12 (1 column)
|--------|--------|--------|--------|  <-sm=3 (4 columns)
|-----------|-----------|-----------|  <-md=4 and larger (3 columns)

【参考方案2】：

<v-flex> 网格的最大值为 12。因此，如果您在 <v-flex xs12> 上设置 xs12（超小断点），它将占用所有网格宽度，直到遇到下一个断点（如果您不这样做） t 设置另一个断点，最低的断点将应用于所有屏幕宽度）。所以然后设置<v-flex xs12 md6>，现在当你命中中间断点时，每张卡片将占用 6 个网格空间，这将允许你并排有 2 张卡片。设置lg3，将允许您在同一个空间中放置4张卡片。

您可以在对示例的此修改中看到它的工作原理 https://codepen.io/twandy/pen/JrxamB?editors=1001