如何在 Vue Material 中设置灵活的网格

Posted 2023-02-22

技术标签:

【中文标题】如何在 Vue Material 中设置灵活的网格【英文标题】：How to set up flexible grid in Vue Material 【发布时间】：2020-05-14 02:29:47 【问题描述】：

我正在尝试构建一个界面，该界面使用 Vue-Material 在网格中呈现用户输入的卡片。卡片渲染正确。但是，我希望我的网格能够以消除间隙的方式弯曲、对齐和错开不同大小的卡片，如下所示：

下面的代码对应上面的网格：

<template>
  <div class="content">
    <div class="md-layout">
      <div
        v-for="post in posts.slice().reverse()" :key="post.id"
        class="md-layout-item md-size-20 md-xsmall-size-100"
      >
        <md-card>
          <md-card-content v-if="post.downloadUrl">
            <md-card-media>
              <img :src="post.downloadUrl" style="width: 100%"/>
            </md-card-media><br>
            <p> post.content </p>
            <p> post.timestamp | moment </p>
          </md-card-content>

          <md-card-content v-else>
            <p> post.content </p>
            <p> post.timestamp | moment </p>
          </md-card-content>
          <md-card-actions>
            <md-button class="md-icon-button md-info">
              <md-icon>favorite</md-icon>
            </md-button>
            <md-button class="md-icon-button md-info">
              <md-icon>share</md-icon>
            </md-button>
          </md-card-actions>
        </md-card>
      </div>
    </div>
  </div>
</template>

如何配置此 Vue-Material 布局以消除这些空白？谢谢！

示例 #3

【问题讨论】：

这似乎是一个css问题，尝试在你的box div上使用min-height，我相信它是md-layout-item 那种作品。我添加了.md-layout-item height: 250px ，但它仍然无法解决位于大卡正下方的小卡的问题。请参阅我在上面添加的新图像。 【参考方案1】：

你可以使用vue-masonry插件。

npm i vue-masonry

看到它working。沙盒here.

【讨论】：

谢谢，哈哈，我实际上在您发布此内容之前就想通了。请看下面我的回答。不过我真的很感激！不过，它不是同一个插件。我建议的那个有介绍和调整动画大小。但我想你最清楚你想要/需要什么。干杯!通常我会删除我的答案，但由于它与您的不完全相同，其他有类似问题的人可能会发现它很有用。【参考方案2】：

感谢今天所有回复的人。但是，我需要的是这样的插件：https://www.npmjs.com/package/vue-masonry-css

我需要做的就是将 v-for 循环容器和卡片嵌入到以下内容中：

<masonry
  :cols="3"
  :gutter="30"
  >
  <div v-for="(item, index) in items" :key="index">Item: index + 1</div>
</masonry>

这就是我想要达到的目标：

【讨论】：

【参考方案3】：

你可以使用grid布局：

Vue.use(VueMaterial.default)

new Vue(
  el: '#app'
)

.grid-container 
  display: grid;
  max-width: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(10px, auto);
  grid-gap: 1rem;
  padding: 1rem;

<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1,minimal-ui" name="viewport">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css">

<body>
  <div id="app">
    <div class="grid-container">
      <md-card>
        <md-card-media>
          <img src="https://vuematerial.io/assets/examples/card-image-1.jpg" >
        </md-card-media>
        <md-card-header>
          <div class="md-title">Card without hover effect</div>
        </md-card-header>

        <md-card-content>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
        </md-card-content>

        <md-card-actions>
          <md-button>Action</md-button>
          <md-button>Action</md-button>
        </md-card-actions>
      </md-card>

      <md-card md-with-hover>
        <md-ripple>
          <md-card-header>
            <div class="md-title">Card with hover effect</div>
            <div class="md-subhead">It also have a ripple</div>
          </md-card-header>

          <md-card-content>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
          </md-card-content>

          <md-card-actions>
            <md-button>Action</md-button>
            <md-button>Action</md-button>
          </md-card-actions>
        </md-ripple>
      </md-card>
      <md-card>
        <md-card-header>
          <div class="md-title">Card without hover effect</div>
        </md-card-header>

        <md-card-content>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
        </md-card-content>

        <md-card-actions>
          <md-button>Action</md-button>
          <md-button>Action</md-button>
        </md-card-actions>
      </md-card>

      <md-card md-with-hover>
        <md-ripple>
          <md-card-header>
            <div class="md-title">Card with hover effect</div>
            <div class="md-subhead">It also have a ripple</div>
          </md-card-header>

          <md-card-content>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
          </md-card-content>

          <md-card-actions>
            <md-button>Action</md-button>
            <md-button>Action</md-button>
          </md-card-actions>
        </md-ripple>
      </md-card>
      <md-card>
        <md-card-header>
          <div class="md-title">Card without hover effect</div>
        </md-card-header>

        <md-card-content>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
        </md-card-content>

        <md-card-actions>
          <md-button>Action</md-button>
          <md-button>Action</md-button>
        </md-card-actions>
      </md-card>

      <md-card md-with-hover>
        <md-ripple>
          <md-card-header>
            <div class="md-title">Card with hover effect</div>
            <div class="md-subhead">It also have a ripple</div>
          </md-card-header>

          <md-card-content>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
          </md-card-content>

          <md-card-actions>
            <md-button>Action</md-button>
            <md-button>Action</md-button>
          </md-card-actions>
        </md-ripple>
      </md-card>
      <md-card>
        <md-card-header>
          <div class="md-title">Card without hover effect</div>
        </md-card-header>

        <md-card-content>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
        </md-card-content>

        <md-card-actions>
          <md-button>Action</md-button>
          <md-button>Action</md-button>
        </md-card-actions>
      </md-card>

      <md-card md-with-hover>
        <md-ripple>
          <md-card-header>
            <div class="md-title">Card with hover effect</div>
            <div class="md-subhead">It also have a ripple</div>
          </md-card-header>

          <md-card-content>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
          </md-card-content>

          <md-card-actions>
            <md-button>Action</md-button>
            <md-button>Action</md-button>
          </md-card-actions>
        </md-ripple>
      </md-card>
    </div>
    &copy Image linked from https://vuematerial.io/
  </div>

  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/vue-material"></script>

更多关于 CSS 网格：https://developer.mozilla.org/en-US/docs/Web/CSS/grid

另一种解决方案

你可以使用

Andy Barefoot 的解决方案：https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb（Codepen：https://codepen.io/andybarefoot/pen/QMeZda），

或任何来自这里的：https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/

很遗憾，我无法将其添加为 sn-p - 内容太长，因此我的答案将超过 30,000 个字符。

【讨论】：

有点，但我使用 v-for 指令循环遍历所有卡片，然后按帖子编号的顺序将它们返回到屏幕（参见图片）。这些卡片将代表不同的尺寸。我希望卡片以类似于上面的图像示例 #3 的方式呈现，在一个漂亮的交错网格中，没有间隙。我怎样才能做到这一点？哦，Pinterest（砌体）风格？是的！砌体风格。在上述模板中如何实现？意思是，如何将砌体应用到每个循环的卡片项目上？当长卡位于短卡下时（见上图），如何配置它们以确认砖石布局而不在行和列中产生间隙？ @JS_is_awesome18 我添加了另一个解决方案 - 肯定有效；您需要自定义它（类、JS 对象等）

以上是关于如何在 Vue Material 中设置灵活的网格的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Material-UI、ReactJS 中从分页中设置分页项的样式？

如何使用 useStyle 在 Material Ui 中设置类组件的样式

如何在 Material Design Components for Web 中设置主色和辅助色？

如何在 Qt QML (QtQuick 2) 中设置 Material Dark Theme？

1Echarts系列Vue中设置echarts折线图样式(图表网格标签提示标题文字)，手把手教程系列