Vue-masonry 插件不适用于 Vuetify

Question

我尝试通过 vue-masonry 插件实现砌体网格。我使用 Nuxt 和 Vuetify。 vue-masonry 似乎不适用于 vuetify。

1. 我将 vue-masonry 作为插件 (vue-masonry.js) 连接到我的 Nuxt 项目

   import Vue from 'vue'
   import {VueMasonryPlugin} from 'vue-masonry'
   
   Vue.use(VueMasonryPlugin)
   

2. 我在 nuxt.config.js 中设置了插件

   plugins: [
      { src: '~/plugins/vue-masonry', ssr: false }
   ],
   

3. 接下来我尝试将 vuetify 网格与 vue-masonry 一起使用，但这里的东西坏了

    <template>
      <v-container>
        <v-row>
          <v-col
            xs="12"
            sm="6"
            md="4"
            lg="3"
            v-for="card in cards"
            :key="card.id"
            v-masonry
            origin-left="true"
            horizontal-order="true"
            transition-duration="0.3s"
            item-selector=".item"
          >
            <v-card v-masonry-tile class="item" max-width="240">
              <v-card-title>{{card.title}}</v-card-title>
              <v-card-text class="text-ellipsis">{{card.text}}</v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </template>
   
    <script>
    export default {
      data() {
        return {
          cards: [
            {
              id: 1,
              title: "title",
              text:
                "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make",
            },
            {
              id: 2,
              title: "new one",
              text:
                "Lorem Ipsum has when an unknown printer took a galley of type and scrambled it to make",
            },
            {
              id: 3,
              title: "title",
              text:
                "Lorem Ipsum is simply dummy text of the printing and typesetting industry. took a galley of type and scrambled it to make",
            },
            {
              id: 4,
              title: "title",
              text:
                "Lorem Ipsum is simply dummy. Lorem Ipsum has been the when an unknown printer took a galley of type and scrambled it to make",
            },
            {
              id: 5,
              title: "title",
              text:
                "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the when an unknown printer took a galley of type and scrambled it to make",
            },
            {
              id: 6,
              title: "title",
              text:
                "Lorem Ipsum is simply dummy text of the printing and typesetting industry.  a galley of type and scrambled it to make",
            },
            {
              id: 7,
              title: "title",
              text:
                "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the when an unknown printer took a galley of type and scrambled it to make",
            },
            {
              id: 8,
              title: "title",
              text:
                "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the when an unknown printer took a galley",
            },
            {
              id: 9,
              title: "title",
              text:
                "Lorem Ipsum has been the when an unknown printer took a galley of type and scrambled it to make",
            },
            {
              id: 10,
              title: "title",
              text: "Lorem Ipsum is simply industry.",
            },
          ],
        };
      },
    };
    </script>
   

没有出现砌体网格，只是用卡片清除 vuetify cols。

如何使用 vuetify 实现砌体网格？我很高兴有任何建议和使用 vuetify 实现砌体网格。

Answer 1

我用 vuetify 找到了一个适合 vue-masonry 的网格解决方案！它就像一个魅力 =)

<template>
  <v-container>
    <v-row
      v-masonry
      origin-left="true"
      horizontal-order="true"
      transition-duration="0.3s"
      item-selector=".item"
    >
      <v-col
        v-masonry-tile
        class="item"
        v-for="card in cards"
        :key="card.id"
        xs="3"
        sm="6"
        md="4"
        lg="3"
      >
        <v-card>
          <v-card-title>{{ card.title }} {{ card.id }}</v-card-title>
          <v-card-text>{{ card.text }}</v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>