a423a7f801
- 移除 Column 组件，使用 vue-masonry-wall 实现瀑布流布局- 更新 ItemList 组件，集成瀑布流布局和新的详情弹窗 - 修改 DetailPopup 组件，使用新的详情信息结构 - 更新 itemDetail 组件，适配新的详情信息数据 - 在项目中添加 vue-masonry-wall 依赖
24 lines
559 B
Vue
24 lines
559 B
Vue
<script setup lang="ts">
|
|
import MasonryWall from '@yeger/vue-masonry-wall'
|
|
const items = [
|
|
{
|
|
title: 'First',
|
|
description: 'The first item.',
|
|
},
|
|
{
|
|
title: 'Second',
|
|
description: 'The second item.',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<masonry-wall :items="items" :ssr-columns="2" :minColumns="2" :gap="16">
|
|
<template #default="{ item, index }">
|
|
<div :style="{ height: `${(index + 1) * 100}px` }">
|
|
<h1>{{ item.title }}</h1>
|
|
<span>{{ item.description }}</span>
|
|
</div>
|
|
</template>
|
|
</masonry-wall>
|
|
</template> |