heikaimu / vue3-waterfall-plugin Goto Github PK

删除数据时，使用序号移除，slot 中怎么返回 index？

<template #item="{item,index}">

按照示例中的代码可以正常显示瀑布流，但是当把图片列表list从接口获取时，由于接口返回的图片路径不是src而是url，结果图片无法正常显示。
是设计如此，还是我的代码问题。
如下代码无法正常显示，把url字段换src字段才可正常显示。
list: [ { url:"public/img/1.jpeg" } ]

我在LazyImg标签上加了alt属性，但是该属性最终没有加到img里面。对于SEO来说，alt属性比较重要，不知道能否支持呢

用waterfall组件包起来的图片就报CORS，直接用img标签就可以正常显示，node 16，有碰到这情况的吗

在README的例子里：

import 'vue-waterfall-plugin-next/dist/style.css'

实际应该是：

import 'vue-waterfall-plugin-next/style.css'

例子写错了？

在拖动浏览器过程中出现的问题

这是代码片段

我希望新出现的图片是在最前面的，但是当把新的元素放在list的前面，list更新了，显示却不更新新的图片；
如果是正常的顺序，放在list后面就没问题，会在最后正常更新新的图片

主要原因是animate.css4.1.1的类前面多了个前缀animate__

\vue3-waterfall-plugin\lib\Waterfall.vue 第165行附件

mounted() {
    window.onresize = debounce(this.resize, 100);
},

会导致多个Waterfall存在时，只有最后一个Waterfall能跟随窗口变化
建议增加控制参数允许手动控制或者修改实现

my-lib.es.js 小问题，不影响使用，但是抛异常引起开发者困惑

观察到 wrapperWidth.value 为 0，colWidth.value 为 0，执行 renderer 后执行 layoutHandle 中的 initY

watch(() => [wrapperWidth, colWidth, props.list], () => {
      renderer();
    }, { deep: true });

此时 cols.value 为 NaN，new Array(cols.value) 抛异常

const initY = () => {
    posY.value = new Array(cols.value).fill(props.hasAroundGutter ? props.gutter : 0);
  };

源码位置：lib/use/useLayout.ts

• 目前图片加载失败只会在 Console 里面输出一行日志, 不是很直观
• 如果暴露了图片加载失败的 Event, 可以自己定义加载后的操作, 比如提示加载失败. 体验上会好很多

使用 pnpm add vue-waterfall-plugin-next 安装的时候提示依赖于 element-plus，然后我就来看了源码，好像可以不需要？

是否只是example 使用了 element-plus？如果可以的话，希望把不需要的依赖移至开发依赖，可以在使用的时候减少一些困惑。

最后感谢作者的开源组件。

用组件的情况下，图片发生跨域，但是，我直接用引入却是没问题的，请问是怎么回事？请教一下
下面是直接引入


下面是使用组件

<Waterfall
:list="demoList"
:gutter="0"
class="works_list"
:breakpoints="{ 1400: { rowPerView: imgNum } }"
:crossOrigin="false"
ref="masonry"

这是正常的前几个

这是后面的布局计算错误的

目前卡片的默认排布为居中对齐无法修改，希望能开放左对齐（以及右对齐）的设置，这在有侧边栏的布局下更为友好。

TITLE: Allow cards to align to the left.
DESC: Currently the default layout of cards is fixed "align to center". It would be great to add an option to change to "align to left" (or right). This will be more friendly to layouts with sidebars.

list改变重绘是强制的吗，我这边现在第一页list数据加载回来，有的这种空白区域就会重绘一下，然后图片就会跳一下，怎么才能不跳呢，直接显示在相应位置

在同一页面使用tabs切换显示此组件的瀑布流，每切换一次动画都要重新播放一次，如何关闭掉？
我尝试设置delay来取消动画，但只能稍微缩短，设置过低将会出现视图更新问题

想移除掉的动画效果：视频查看

我按照文档上的样式引入 不行。更改下路径才可以

import 'vue-waterfall-plugin-next/dist/style.css'

最后感谢 作者提供插件。

第一次请求没有问题，再次加载就出现问题
搜索组件传递参数，后调用父组件的handleLoadMore

子组件

<script setup lang="ts"> import { ref ,defineEmits} from 'vue' const emits = defineEmits(['childEvent']) const keywork = ref("") const handleEnter = () =>{ emits('childEvent',keywork.value) } </script>
父组件
`
onMounted(() => {
handleLoadMore("风景")
})

// 加载更多
function handleLoadMore(keywork:string) {

toutiao_search_pic({
page: page.value,
size: props.pageSize,
term: keywork
}).then((res) => {
list.value.push(...res)
page.value += props.pageSize
})
}
`
请教一下，要实现这个功能如何做

调用waterfallRef.value.renderer()后，发现高度不发生变化

#5 img标签循环可以正常展示，使用组件部分跨域

版本："vue-waterfall-plugin-next": "^2.1.7"
Cannot read properties of null (reading 'isCE')

有大神碰到过这个问题吗，接口返回数据后报错了

使用width指定卡片的宽度一直不成功, 看了几个小时源码才知道breakpoints有未写在文档中的默认值:

breakpoints: {
type: Object,
default: () => ({
1200: {
rowPerView: 3
},
800: {
rowPerView: 2
},
500: {
rowPerView: 1
}
})
},

并且breakpoints优先级高于width, 只是使用width指定卡片的宽度是无法生效的

加了:crossOrigin="false"还是会报跨域是怎么回事，求答复

疑问

image.crossOrigin = 'Anonymous' 真的有必要吗？加了反而不能正常显示了

手动修改本地 my-lib.es.js, 去除 image.crossOrigin = 'Anonymous' 可以正常显示

问题截图

环境

nodejs 16.x.x
"vue-waterfall-plugin-next": "^2.1.11",

后端是 moleculer 起的 api 和 file server，允许跨域，跨域api可以正常调用

网上讨论

https://segmentfault.com/q/1010000008648867

比如我选了分类A，加载了30条数据，并且都排列显示好了。这个时候我选分类B，又加载了30条数据，我把Waterfall 的list值重新刷新，没有效果，调用 waterfall.value.renderer() 也不行

一个页面上引用两个组件，第一个height会影响第二个height

do u make ssr ?

尝试使用 npm i --save-dev @types/vue-waterfall-plugin-next (如果存在)，或者添加一个包含 declare module 'vue-waterfall-plugin-next'; 的新声明(.d.ts)文件ts(7016)

自己测试了一下,可以在useResizeObserver这个钩子里面去处理,用一些方法去检测列表是否可见,如果不可见的话就停止计算宽度

这个点删除 LazyImg 没有响应删除，好奇怪