瀑布流组件
Waterfall 组件位于 src/components/Waterfall 内
TIP
data 数据必须带有高度字段，用于确保计算出正确的位置
<script lang="ts" setup>\nimport { Waterfall } from '@/components/Waterfall'\nimport Mock from 'mockjs'\nimport { ref, unref } from 'vue'\nimport { toAnyString } from '@/utils'\n\nconst data = ref<any>([])\n\nconst getList = () => {\n const list: any = []\n for (let i = 0; i < 20; i++) {\n // 随机 100, 500 之间的整数\n const height = Mock.Random.integer(100, 500)\n const width = Mock.Random.integer(100, 500)\n list.push(\n Mock.mock({\n width,\n height,\n id: toAnyString(),\n image_uri: Mock.Random.image(`${width}x${height}`)\n })\n )\n }\n data.value = [...unref(data), ...list]\n if (unref(data).length >= 60) {\n end.value = true\n }\n}\ngetList()\n\nconst loading = ref(false)\n\nconst end = ref(false)\n\nconst loadMore = () => {\n loading.value = true\n setTimeout(() => {\n getList()\n loading.value = false\n }, 1000)\n}\n</script>\n\n<template>\n <Waterfall\n :data="data"\n :loading="loading"\n :end="end"\n :props="{\n src: 'image_uri',\n height: 'height'\n }"\n @load-more="loadMore"\n />\n</template>\n\n| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| data | 要展示的数据 | Array | - | - |
| reset | 窗口变化是否重新布局 | boolean | true/false | true |
| width | 每个项的宽度 | number | - | 200 |
| gap | 每个项的间距 | number | - | 20 |
| loadingText | 加载中文字 | string | - | 加载中... |
| loading | 是否加载中 | boolean | - | false |
| end | 是否加载结束 | boolean | - | false |
| endText | 是否加载结束文字 | string | - | 没有更多了 |
| props | 字段别名 | object | - | { src: 'src', height: 'height' } |
| 方法名 | 说明 | 回调参数 |
|---|---|---|
| loadMore | 加载更多事件 | - |