waterfall-vue2 v1.0.2

Waterfall

瀑布流组件

使用指南

import { Waterfall } from "waterfall-vue2";
Vue.use(Waterfall);

代码演示

基础用法

<Waterfall
  :pageData="pageData"
  :columnCount="2"
  :colStyle="{display:'flex',flexDirection:'column',alignItems:'center'}"
  query-sign="#cardItem"
  @wfLoad="onLoad"
  @ObserveDataTotal="ObserveDataTotal"
>
  <template #default="{ item, columnIndex, index}">
    <!--  slot 内容  good-card：事例组件 -->
    <good-card :item="item" id="cardItem" />
  </template>
</Waterfall>

export default {
  name: 'waterfall-demo',
  data() {
    return {
      pageData: []
    };
  },
  methods: {
    onLoad() {
        // 数据请求
        const data = request(....)
        // 当前页的数据
        this.pageData =data;
    },
     ObserveDataTotal(length) {
      console.log(length);
    }
  }
}

API

Event

Slot

源码地址

源码地址请参见 github