我有一个包含 6 个或更多 v-card 的页面。
有没有办法像拼图一样把它们拼起来？我想删除第一行和第二行的小 v-card 之间的空白。
现在是这样的:
最佳答案
没办法(还)通过 Vuetify API 解决这个问题。
相关Github Feature要求:
[Feature Request] Masonry Layout #4091
使用 Javascript 插件。例如masonry.js .
Codepen 演示: https://codepen.io/ezra_siton/pen/gOpZqKr
<!-- https://vuetifyjs.com/en/ -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-content>
<v-container>
<v-row class="masonry">
<v-col class="child" cols="12" sm="6">
<v-card class="pa-2" color="pink darken-1" dark>
<v-card-title>Card 1</v-card-title>
<v-card-text>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections form, Rackham. One of three columns
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections form, Rackham.
</v-card-text>
</v-card>
</v-col>
<!-- card 2-->
<v-col class="child" cols="12" sm="6">
<v-card class="pa-2" color="orange darken-3" dark>
<v-card-title>Card 2</v-card-title>
<v-card-text>
One The standard chunk of Lorem Ipsum used since the 1500s is
</v-card-text>
</v-card>
</v-col>
<!-- card 3 -->
<v-col class="child" cols="12" sm="6">
<v-card class="pa-2" color="#385F73" dark >
<v-card-title>Card 3</v-card-title>
<v-card-text>
The chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections form, Rackham.
</v-card-text>
</v-card>
</v-col>
<!-- card 4 -->
<v-col class="child" cols="12" sm="6">
<v-card class="pa-2" color="blue darken-4" dark >
<v-card-title>Card 4</v-card-title>
<v-card-text>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections form, Rackham.
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
mounted: function () {
// Code that will run only after the
// entire view has been rendered
var msnry = new Masonry( '.masonry', {
// options
itemSelector: "[class*='col-']",
});
}
})
</script>第 1/3 步:正文之前的 CDN
直接链接到 unpkg 上的 Masonry 文件.
<script src="https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>
-或- 使用 npm 安装:npm install masonry-layout
并使用导入 import Masonry from 'masonry-layout'
第 2/3 步:HTML - 设置容器元素
Masonry works on a container grid element with a group of child items.
添加 class (或 id )到您的 flexbox 网格(设置为 container element )。
masonry在此示例中(使用您想要的任何名称)。
<v-row class="masonry">
<v-col class="child" cols="12" sm="6">
<v-card class="pa-2" outlined >
..rest of the code
第 3/3 步:使用 vanilla js 初始化
new Masonry( elem, options )
3.1:使用.masonry作为容器元素参数。
3.2: 内部选项对象 - 设置 itemSelector到:
itemSelector: "[class*='col-']"
[class*='col-'] : Wildcard selector (选择任何包含 col 的类。例如:.col-6 - 或 - .col-md-2 ==> DRY//Clean solution)
我在 vue mounted() 中加载脚本 lifecycle hook (在组件添加到 DOM 之后)。
new Vue({
el: '#app',
vuetify: new Vuetify(),
mounted: function () {
// Code that will run only after the
// entire view has been rendered
var msnry = new Masonry( '.masonry', {
// options
itemSelector: "[class*='col-']",
});
}
})
另一种选择是使用 flexbox/Grid 和自定义 CSS，在我看来，对于这样一个简单的任务来说，代码和想法太多了。相关文章:
https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/
https://stackoverflow.com/questions/60908047/