vuetify中如何支持大屏自定义tile？答案

【问题标题】：How to support custom tiles in large screen in vuetify?vuetify中如何支持大屏自定义tile？
【发布时间】：2020-10-15 09:25:48
【问题描述】：

我有一个包含 3 行磁贴的仪表板，每行包含 5 个磁贴。如下图

我正在使用下面的瓷砖代码：

<v-layout row wrap>
  <v-flex xs12 sm8 md4 lg4 xl4 class="lg5-custom pl-0 pb-0 tiles-cursor">
    <v-card flat tile class="d-flex">
      <v-img :src="require('img_url')" aspect-ratio="1" class="grey lighten-2">
      </v-img>
      <div class="content">
        <h3 align="center">A</h3>
      </div>
    </v-card>
  </v-flex>
  <v-flex xs12 sm8 md4 lg4 xl4 class="lg5-custom pl-0 pb-0 tiles-cursor">
    <v-card flat tile class="d-flex">
      <v-img :src="require('img_url')" aspect-ratio="1" class="grey lighten-2">
      </v-img>
      <div class="content">
        <h3 align="center">A</h3>
      </div>
    </v-card>
  </v-flex>
  ... so on
</v-layout>

下面是我自定义图块的 CSS 代码：

@media (min-width: 1264px) and (max-width: 1903px) {
    .flex.lg5-custom {
        width: 20%;
        max-width: 20%;
        flex-basis: 20%;
    }
    .flex.lg10-custom {
      width: 40%;
      max-width: 40%;
      flex-basis: 40%;
    }
}

即使是小屏幕，有时第三行最后一个图块也不支持。

.flex.lg10-custom CSS 用于第三行最后一个图块。

我想为所有屏幕（尤其是大屏幕）支持这个登陆页面。有什么想法吗？

【问题讨论】：

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

所以，我通过使用v-row 和v-col 而不是v-flex 解决了这个问题。但是，与前一个相比，所有图块都变小了，因为整个行大小为12，我除以5，所以我只能使用10，而不是12。我必须从左边离开1，从右边离开1，才能做到center。以下是我的代码：

<v-container fluid>
  <v-row justify="center">
    <v-col cols="2" class="pb-1 pt-1 pl-1 pr-1">
      <v-card elevation="23" class="secondary ml-0 mr-0 mt-0 mb-0 change-mouse-pointer">
      <v-img :src="require('img_url')" aspect-ratio="1" class="grey lighten-2">
      </v-img>
      <div class="content">
        <h3 align="center">A</h3>
      </div>
    </v-card>
  </v-col>
  <v-col cols="2" class="pb-1 pt-1 pl-1 pr-1">
      <v-card elevation="23" class="secondary ml-0 mr-0 mt-0 mb-0 change-mouse-pointer">
      <v-img :src="require('img_url')" aspect-ratio="1" class="grey lighten-2">
      </v-img>
      <div class="content">
        <h3 align="center">A</h3>
      </div>
    </v-card>
  </v-col>
  ... so on
 </v-row>
.... last row last col
<v-row justify="center">
... first 3 will be the same as before

  <v-col cols="4" class="pb-1 pt-1 pl-1 pr-1">
      <v-card elevation="23" class="secondary d-flex" height="50%">
      <v-img :src="require('img_url')" aspect-ratio="1" class="grey lighten-2">
      </v-img>
      <div class="content">
        <h3 align="center">A</h3>
      </div>
    </v-card>
  </v-col>
 </v-row>
</v-container>

如果有人想要完整的解决方案，请在下方评论。

【讨论】：