MasonryGrid 瀑布流

响应式瀑布流布局组件，支持图片懒加载、选择、预览、删除、无限滚动等。

何时使用

展示大量图片、视频、文件等非等高内容时。
需要图片懒加载、选择、预览、删除、无限滚动等能力时。
需要响应式列数自适应布局时。

基础用法

<script setup lang="ts">
import { ref } from "vue";
import { MasonryGrid } from "@reglow/reui";

const items = ref([
  { id: 1, name: "image1.jpg", type: "image", url: "/image1.jpg", size: 102400 },
  { id: 2, name: "video1.mp4", type: "video", url: "/video1.mp4", size: 5242880 },
]);
const selectedIds = ref<number[]>([]);

const onSelect = (id: number) => {
  const idx = selectedIds.value.indexOf(id);
  if (idx >= 0) selectedIds.value.splice(idx, 1);
  else selectedIds.value.push(id);
};
</script>

<template>
  <MasonryGrid
    :items="items"
    :selected-ids="selectedIds"
    @select="onSelect"
    @preview="(item) => console.log('preview', item)"
    @delete="(id) => console.log('delete', id)"
  />
</template>

示例图片 1

240×120· 1.0 KB

reglow

2026-08-14

本地示例

永久有效

示例图片 4

240×120· 4.0 KB

reglow

2026-08-14

本地示例

永久有效

示例图片 2

240×190· 2.0 KB

reglow

2026-08-14

本地示例

永久有效

示例图片 5

240×190· 5.0 KB

reglow

2026-08-14

本地示例

永久有效

示例图片 3

240×260· 3.0 KB

reglow

2026-08-14

本地示例

永久有效

示例图片 6

240×260· 6.0 KB

reglow

2026-08-14

本地示例

永久有效

— 没有更多了 —

无限滚动

通过 loading、has-more 和 load-more 事件实现无限滚动加载。

<script setup lang="ts">
import { ref } from "vue";

const items = ref([]);
const loading = ref(false);
const hasMore = ref(true);

const loadMore = () => {
  loading.value = true;
  // 加载更多数据
  setTimeout(() => {
    // items.value.push(...newItems);
    loading.value = false;
  }, 1000);
};
</script>

<template>
  <MasonryGrid
    :items="items"
    :loading="loading"
    :has-more="hasMore"
    @load-more="loadMore"
  />
</template>

隐藏操作

通过 show-actions 和 show-delete 控制操作按钮的显隐。

<template>
  <MasonryGrid :items="items" :show-actions="false" :show-delete="false" />
</template>

自定义列数

通过 column-count 指定固定列数，设为 0 则自适应。

<template>
  <MasonryGrid :items="items" :column-count="4" />
</template>

选择模式

通过 selected-ids 和 select 事件实现选择功能。

<template>
  <MasonryGrid :items="items" :selected-ids="selectedIds" @select="onSelect" />
</template>

导入

import { MasonryGrid } from "@reglow/reui";

Props

属性	类型	默认值	说明
`items`	`any[]`	-	数据列表
`selectedIds`	`number[]`	`[]`	选中 ID
`loading`	`boolean`	`false`	加载中
`hasMore`	`boolean`	`false`	是否有更多
`showActions`	`boolean`	`true`	显示操作
`showDelete`	`boolean`	`true`	显示删除
`emptyText`	`string`	`暂无数据`	空数据文案
`columnCount`	`number`	`0`	列数（0 为自适应）

Events

事件	说明	回调参数
`select`	选择/取消选择	`(id: number)`
`preview`	预览	`(item: any)`
`copy`	复制链接	`(url: string)`
`download`	下载	`(item: any)`
`assign-groups`	分配分组	`(item: any)`
`delete`	删除	`(id: number)`
`load-more`	加载更多	`()`

响应式列数

当 column-count 设为 0（默认）时，列数根据容器宽度自适应：

容器宽度	列数
>= 1200px	5
>= 900px	4
>= 640px	3
< 640px	2

Item 数据结构

属性	类型	说明
`id`	`number`	唯一标识
`name`	`string`	名称
`type`	`"image" \| "video" \| "file"`	类型
`url`	`string`	URL
`size`	`number`	文件大小
`width`	`number`	宽度
`height`	`number`	高度
`uploader_name`	`string`	上传者
`created_at`	`string`	创建时间
`expire_at`	`string`	过期时间
`is_expired`	`boolean`	是否过期
`source`	`string`	来源

国际化

空状态、加载中、加载更多、没有更多了、过期提示等文案默认跟随全局语言（zh-CN / zh-TW / en-US）。

BorderBeam 边框流光

为容器边框提供持续流动的装饰性高亮效果，适合登录面板、推荐卡片、重点 CTA 区域等场景。

Splitter 分隔面板

自由切分区域，支持拖拽调整与折叠

内容锚点

何时使用
基础用法
无限滚动
隐藏操作
自定义列数
选择模式
导入
Props
Events
响应式列数
Item 数据结构
国际化