vue-pre-waterfall

a vue waterfall component

git

vue-pre-waterfall

How to use

# Installation
npm install vue-pre-waterfall --save

# es6 import
import vuePreWaterfall from 'vue-pre-waterfall'
Vue.use(vuePreWaterfall)

# Example
<pre-waterfall :imgs="data"
                :gap="15"
                :radius="6"
                :border="false"
                shadow
                hover
                @scrollToBottom="updateData"
                @imgClick="imgClick">
   <div class="info" slot-scope="props">
        第{{props.index + 1}}张图片
   </div>
   <div class="loading" slot="loading">
        loading...
   </div>
</pre-waterfall>

Props

| props | type | default | description | | ------ | ------ | ------ | ------ | | imgs | Array | | 必填，例：[{src: 'a.png', ...}, ...] | | gap | Number | 20 | 卡片间距，单位px | | hover | Boolean | false | 鼠标悬浮图片特效 | | border | Boolean | true | 卡片边框 | | shadow | Boolean | false | 卡片阴影 | | radius | Number | 8 | 卡片圆角，单位px |

Event

| name | params | description | | ------ | ------ | ------ | | scrollToBottom | | 滚动到底部触发事件 | | imgClick | img index | 点击图片触发事件 |

Slot

1.default
params

| param | description | | ------ | ------ | | img | | | index | |

2.slot="loading"
params 无