Code Monkey home page Code Monkey logo

vue3-waterfall-plugin's Introduction

Vue3 瀑布流组件

Vue3瀑布流插件支持PC和移动端,包含Animate的各种动画效果以及图片懒加载功能。

安装

npm install vue-waterfall-plugin-next

使用

import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css'

// 数据
data: {
  list: [
    {
      src: "xxxx.jpg",
      ...
    }
    ...
  ]
}
<Waterfall :list="list">
  <template #item="{ item, url, index }">
    <div class="card">
      <LazyImg :url="url" />
      <p class="text">这是具体内容</p>
    </div>
  </template>
</Waterfall>

Props 参数

参数名 类型 默认值 描述
list Array [] 列表数据
rowKey String id 数据唯一的字段,比如列表里面的id, 如果要删除卡片,该字段为必填
imgSelector String src 图片字段选择器,如果层级较深,使用 xxx.xxx.xxx 方式
width Number 200 卡片在 PC 上的宽度, 与breakpoints一样可以确定卡片的宽度以及每行个数, 但breakpoints优先级高于width
breakpoints Object {
1200:{rowPerView:3},
800:{rowPerView:2},
500:{rowPerView:1}
}
类似css的@media, 定义不同容器宽度下每行卡片个数,主要用于对移动端的适配
gutter Number 10 卡片之间的间隙
hasAroundGutter Boolean true 容器四周是否有 gutter 边距
posDuration Number 300 卡片移动到正确位置的动画时间
animationPrefix String animate__animated 详情见下文《动画样式》
animationEffect String fadeIn 卡片入场动画,默认只有 fadeIn,引入 animation.css 后可使用其他动画
animationDuration Number 1000 卡片入场动画执行时间(单位毫秒),该动画时间只影响卡片重拍的时间,一般情况都不用修改,如果想要修改飞入动画的执行时间,见下文
animationDelay Number 300 卡片入场动画延迟(单位毫秒)
backgroundColor String #ffffff 背景颜色
loadProps Object loadProps 懒加载图片组件的属性设置,详情见下文《懒加载属性》
lazyload Boolean true 是否开启懒加载
crossOrigin Boolean true 图片加载是否开启跨域
delay Number 300 布局刷新的防抖时间,默认 300ms 内没有再次触发才刷新布局。(图片加载完成;容器大小、listwidthgutterhasAroundGutter变化时均会触发刷新)
align String center 卡片的对齐方式,可选值为:left,center,right

WaterfallList 方法

方法名字 返回值类型 描述
afterRender 本次卡片坐标计算完成并且移动到了对应位置(列表渲染的过程可能会多次触发,比如有一张图片加载完成就会重新计算位置)

LazyImg 方法

方法名字 返回值类型 描述
load string img标签的load函数
success string 图片加载成功
error string 图片加载失败

强制更新

<Waterfall ref="waterfall"></Waterfall>

const waterfall = ref(null)
waterfall.value.renderer()

WaterFall组件向外暴露了一个renderer函数,可以直接调用,该方法可以主动重绘列表,使用其他懒加载图片组件的回调函数里可以调用这个renderer来重绘。

动画样式

首先需要明白,这里的动画指的是数据插入时的动画,比如第一次加载数据已经加载更多的时候的一个插入动画。 想要使用动画必须引入animate.css或者定义一个动画className

  1. 如果引入了animate.css,并且版本是4.x.x及以上,可以不作任何处理
  2. 如果引入了animate.css,并且是老版本则需要将animationPrefix设置为animated
  3. 如果不想引入animate.css,想使用插件默认的fadeIn效果,需要手动加入下面的样式
.animate__animated {
  animation-fill-mode: both;
  animation-duration: 1s;
}

animation-duration 决定了卡片的飞入动画执行时间!!!如果引入了animate.css并且想改变飞入动画的时间,则需要手动去修改animation-duration的值。

断点详细配置

breakpoints默认值,当此属性生效时,width失效

breakpoints: {
  1200: {
    // when wrapper width < 1200
    rowPerView: 3,
  },
  800: {
    // when wrapper width < 800
    rowPerView: 2,
  },
  500: {
    // when wrapper width < 500
    rowPerView: 1,
  },
}

懒加载属性

import loading from 'assets/loading.png'
import error from 'assets/error.png'
loadProps: {
  loading,
  error,
  ratioCalculator: (width, height) => {
    // 我设置了最小宽高比
    const minRatio = 3 / 4;
    const maxRatio = 4 / 3;
    // 获取当前图片的比例
    const curRatio = width / height;
    // 如果当前图片比列不在此范围内,我们取最小或者最大值
    if (curRatio < minRatio) {
      return minRatio;
    } else if (curRatio > maxRatio) {
      return maxRatio;
    } else {
      return curRatio;
    }
  }
}
  1. loading 是图片加载时候的等待图
  2. error 是图片加载失败后的占位图
  3. ratioCalculator 是一个设置懒加载图片展示比列的方法,当我们不自定义的时候,懒加载最终出来的图比列就是图片本身,但是有时候我们的图片尺寸可能长宽比较极限,这样出来样式不太美观,我们都可以用这个方法按照我们的想法进行设置。

自定义懒加载图片样式

.lazy__img[lazy=loading] {
  padding: 5em 0;
  width: 48px;
}

.lazy__img[lazy=loaded] {
  width: 100%;
}

.lazy__img[lazy=error] {
  padding: 5em 0;
  width: 48px;
}

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}">

图片设置alt属性失败

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

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

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

图片 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

添加搜索功能

第一次请求没有问题,再次加载就出现问题
搜索组件传递参数,后调用父组件的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
})
}
`
请教一下,要实现这个功能如何做

PC 端使用报错

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

示例的import 路径错了?

在README的例子里:

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

实际应该是:

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

例子写错了?

是否依赖于 `element-plus` ?

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

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

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

高度不变化

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

当在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

图片路径只能是src吗

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

允许卡片左对齐

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

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.

大佬,已经排列好的,怎么重新刷新数据?

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

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

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

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.