Skip to content

vue 瀑布流插件,支持 PC 和移动端,支持 animate 的所有动画效果,支持图片懒加载

Notifications You must be signed in to change notification settings

heikaimu/vue-waterfall-plugin

Repository files navigation

Vue2 瀑布流组件

vue 瀑布流插件,支持 PC 和移动端,支持 animate 的所有动画效果,支持图片懒加载

在线演示地址

vue3 版本

安装

npm install vue-waterfall-plugin

使用

import { LazyImg, Waterfall } from 'vue-waterfall-plugin'
import 'vue-waterfall-plugin/dist/style.css'
<Waterfall :list="list">
  <template #item="{ item, url, index }">
    <div class="card">
      <LazyImg :url="url" />
      <p class="text">这是内容</p>
    </div>
  </template>
</Waterfall>
data: {
  list: [
    {
      src: "xxxx.jpg",
      ...
    }
    ...
  ]
}

作用域插槽返回了3个字段: item 原始数据, url 图片资源, index 卡片索引

Props 参数

参数名 类型 默认值 描述
list Array [] 列表数据
rowKey String id 数据唯一的字段,比如列表里面的id, 如果要删除卡片,该字段为必填
imgSelector String src 图片字段选择器,如果层级较深,使用 xxx.xxx.xxx 方式
width Number 200 卡片在 PC 上的宽度
breakpoints Object breakpoints 自定义行显示个数,主要用于对移动端的适配
gutter Number 10 卡片之间的间隙
hasAroundGutter Boolean true 容器四周是否有 gutter 边距
animationPrefix String animate__animated animate.css 的动画绑定 className,默认的是 4.x.x 版本,如果想使用老版本,只需要改成 animated 即可
animationEffect String fadeIn 卡片入场动画,默认只有 fadeIn,引入 animation.css 后可使用其他动画
animationDuration Number 1000 动画执行时间(单位毫秒)
animationDelay Number 300 动画延迟(单位毫秒)
backgroundColor String #ffffff 背景颜色
loadProps Object loadProps 加载的图片和失败的图片
lazyload Boolean true 是否开启懒加载
delay Number 300 布局刷新的防抖时间,默认 300ms 内没有再次触发才刷新布局。(图片加载完成;容器大小、listwidthgutterhasAroundGutter变化时均会触发刷新)

breakpoints

breakpoints: {
  1200: { //当屏幕宽度小于等于1200
    rowPerView: 4,
  },
  800: { //当屏幕宽度小于等于800
    rowPerView: 3,
  },
  500: { //当屏幕宽度小于等于500
    rowPerView: 2,
  }
}

loadProps

import loading from 'assets/loading.png'
import error from 'assets/error.png'
loadProps: {
  loading,
  error
}

懒加载图片样式覆盖,需要将覆盖样式放在全局才能生效

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

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

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

About

vue 瀑布流插件,支持 PC 和移动端,支持 animate 的所有动画效果,支持图片懒加载

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published