Code Monkey home page Code Monkey logo

vue3-waterfall-plugin's People

Contributors

ec50n9 avatar firkraag avatar heikaimu avatar lynmoe avatar mr-xue avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

vue3-waterfall-plugin's Issues

如果获取数组索引

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

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

图片路径只能是src吗

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

图片设置alt属性失败

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

示例的import 路径错了?

在README的例子里:

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

实际应该是:

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

例子写错了?

往list前面添加元素 无法正常更新显示

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

当在keep-alive中使用时,切换router后console抛异常

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

image

观察到 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

是否考虑暴露图片加载失败时候的 Event

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

是否依赖于 `element-plus` ?

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

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

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

允许卡片左对齐

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

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.

添加搜索功能

第一次请求没有问题,再次加载就出现问题
搜索组件传递参数,后调用父组件的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()后,发现高度不发生变化
image

PC 端使用报错

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

图片 CORS 问题

疑问

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

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

image.crossOrigin = 'Anonymous' // 支持跨域图片

问题截图

image

环境

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() 也不行

ts类型报错

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.