Vue-masonry 插件不适用于 Vuetify

Question

我尝试通过 vue-masonry 插件实现砌体网格。我使用 Nuxt 和 Vuetify。似乎 vue-masonry 不能与 vuetify 一起工作。

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

import Vue from 'vue'
import {VueMasonryPlugin} from 'vue-masonry'

Vue.use(VueMasonryPlugin)

我在nuxt.config.js

中设置了插件

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

接下来我尝试将 vuetify grid 与 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>

masonry grid 没有出现，只是用卡片清除 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>

Vue-masonry 插件不适用于 Vuetify

Vue-masonry plugin doesn't work with Vuetify

masonry

vue.js

nuxt.js

vuetify.js