Vue3 Waterfall

A waterfall component build with Vue3、Typescript and Vite.

中文文档

Usage

Install

yarn add vue3-waterfall

// or

npm i vue3-waterfall --save

Import

<template>
  <waterfall
    :list="list"
    :cols="4"
    :footerHeight="60"
    :nomore="noMore"
    @preLoaded="loadedEnd"
    @scrollReachBottom="loadMore">
    <!-- Customize Image box -->
    <template v-slot:default="{ item }">
      <div class="imgbox">
        <img :src="item.imgSrc" :alt="item.title">
      </div>
    </template>
    <!-- Customize footer -->
    <template v-slot:footer="{ item }">
      <span>{{ item.title }}</span>
    </template>
    <template v-slot:loading>
      <span>Loading...</span>
    </template>
    <template v-slot:nomore>
      <span>NoMore...</span>
    </template>
  </waterfall>
</template>

<script>
import { defineComponent } from 'vue'
import VueWaterfall from 'vue3-waterfall'

export default defineComponent({
  data() {
    return {
      list: [],
      noMore: false
    }
  },
  components: {
    VueWaterfall
  },
  methods: {
    loadMore() {
      console.log('Load More...')
      if (this.list.length >= 30) {
        this.noMore = true
      }
    },
    loadedEnd() {
      console.log('Images preload done.')
    }
  },
})
</script>

Attributes

| Attribute | Description | Type | Default | | :-----| :---- | :---- | :---- | | width | Container width (px), default is 100% relative parent element width. | Number | - | | height | Container height (px), When you do not specify the height value, the default is relative to the height of the parent element 100%, then the parent element must have a height. | Number | - | | list | Required Data used to render the waterfall stream Each array element is an object and must have imgSrc attribute. | Array | [] | | cols | columns, cannot use with colWidth attribute. | Number | 0 | | colWidth | column width（px），cannot use with cols attribute. | Number | 240 | | gap | gap width (px) | Number | 15 | | nomore | whether has more data | Boolean | false | | footerHeight | footer height（px）, it can show other info what u want. | Number | 0 | | scrollDisabled | Disable scrolling | Boolean | false | | scrollDelay | Scrolling throttle (ms) | 200 | | scrollDistance | trigger distance (px) | Number | 0 | | scrollImmediate | Whether to execute the loading method immediately, in case the content cannot be filled up in the initial state. | Boolean | true |

Slots

| Name | Description | :-----| :---- | | default | Default slot, Custom content for image. | | footer | Custom content for footer. | | loading | Custom content for loading status. | | nomore | Custom content for no more data. |

License

Released under the MIT License.