时间戳

首页 > 解决方案 > Vue 3 砌体布局

masonry - Vue 3 砌体布局

问题描述

有谁知道适用于 Vue 3 和服务器端渲染的砌体布局？

我的要求是我不能预先指定列，我希望砖石布局能够解决这个问题。

在我的 Vue 2 应用程序中，我使用的是“vue-masonry”。我还必须使用“vue-client-only”作为我的应用程序，因为我的应用程序是服务器呈现的应用程序。

  <!-- Only rendered during client side rendering, vue-masonry is not support in SSR -->
  <client-only>
    <div
      class="grid"
      v-masonry="containerId"
      transition-duration="0.3s"
      item-selector=".grid-item">
      <div
        v-masonry-tile class="grid-item"
        v-for="(item, i) in items"
        v-bind:key="i">
        <img
          :src="getItemImage(item)"
          :data-key=i
          alt="Small preview">
      </div>
    </div>
  </client-only>

当我在我的 Vue 3 项目中有这个时，我得到了错误

slot is not a function

我尝试使用“vue-masonry-css”，但失败了

Uncaught TypeError: Cannot read property 'use' of undefined

对于以下代码

import Vue from 'vue';
import VueMasonry from 'vue-masonry-css';
Vue.use(VueMasonry);

标签： masonryvuejs3

解决方案

我也在寻找支持 SSR 和 Vue 3 的砖石布局。由于找不到适合我的用例，我创建了https://github.com/DerYeger/vue-masonry-wall。

查看https://vue-masonry-wall.yeger.eu/上的演示，看看它是否符合您的要求。

推荐阅读