1.0.7 • Published 3 years ago
column-vue-waterfall v1.0.7
column-vue-waterfall
分列布局的瀑布流组件,无需知道每个卡片的具体高度,但是你始终应该提供一个默认高度,此高度不会作为最终高度展示 卡片样式尺寸完全自定义
Build Setup
# 安装
npm install column-vue-waterfall
全局使用
import waterfall from 'column-vue-waterfall'
Vue.use(waterfall)
页面内使用
template>
<div id="app">
<div class="home">
<waterfall
:data="items"
:column="2"
:gutter="17"
@reflowed="reflowed"
>
<template v-slot="item">
<!-- 自定义卡片,尺寸样式完全自定义 -->
<div class="item" :style="{...item.style, height: item.height + 'px'}">{{item.index}}</div>
</template>
</waterfall>
</div>
</div>
</template>
<script>
import { Waterfall } from 'column-vue-waterfall'
export default {
name: 'app',
components: {
Waterfall
},
data() {
return {
items: [{}]
}
}
}
</script>
Options
Attribute | Description | Type | Accepted Values | Default | |
---|---|---|---|---|---|
data | 渲染的数据 | Array | 必须包含 height, 数组的每一项会暴露出一个索引 'idx__' | [] | |
column | 列数 | number | - | 2 | |
gutter | 列间距 | number | - | 10 | |
autoResize | 设备宽度变化是否重新渲染 | boolead | true/false | true |