An implementation of Clusterize.js in vue.
Works similar to v-for but only takes enough data to fill the viewport 3 times.
This data is then splitted into three clusters which will move and get filled with the right data on scrolling.
Only for webpack workflows.
No jQuery dependency
npm install --save-dev vue-clusterizeuse version 0.2.0 before vue 1.0.24
# link the components up
components:
"clusterize": require("vue-clusterize")
# or ES6
import clusterize from "vue-clusterize"
components: {
"clusterize": clusterize
}<clusterize :data="rowsData">
<!-- default slot will be used as a template for a single row -->
<div>{{data}}</div>
<!-- (optional) loading slot will be displayed in each cluster which is busy fetching data - only with dynamic data -->
<p slot="loading">loading...</p>
</clusterize>For examples see dev/.
| Name | type | description |
|---|---|---|
| data | Object | a single datapiece (see binding-name in props) |
| loading | Number | will be 0 when finished loading data (only with dynamic data) |
| index | Number | index of the datapiece |
| height | Number | the height of a single row |
you can add your own variables with the row-watchers prop.
example:
<clusterize @get-data="getData">
<div v-if="!loading" v-bind:style="{height:height+'px'}">{{data}} - index: {{index}}</div>
<p slot="loading">loading...</p>
</clusterize>| Name | type | default | description |
|---|---|---|---|
| binding-name | String | "data" | name to access the data in your template |
| height | Number | null | Height of the clusterize element |
| auto-height | Boolean | false | If autoheight should be used (see below) |
| manual-start | Boolean | false | rendering doesn't start on ready (call start on the component instance instead) |
| data | Array | [] | static data to render |
| scroll-top | Number | 0 | sets scrollTop |
| scroll-left | Number | 0 | sets scrollLeft |
| cluster-size-fac | Number | 1.5 | determines the cluster size relative to visible size |
| row-height | Number | null | enforced row-height, will be determined at runtime when not set |
| template | String | - | row template (defaults to slot content) |
| style | Object | - | to pass trough style (vue object) |
| row-watchers | Object | {height: {vm: this, prop:"rowHeight"}} | variables, will be available in template |
| parent-vm | Object | this.$parent | where to resolve components in template |
| flex | Boolean | false | allow multiple items per row. See flex. |
| flex-initial | Number | 20 | data pieces to take for calculation of row height (should fill several rows) |
| flex-fac | Number | 1 | reduce to reduce items per row |
There are two ways clusterize can be used, either use a fixed height:
<clusterize :data="rowsData" :height="400" v-ref:clusterize>Or use autoheight:
<html style="height:100%">
<body style="height:100%">
<div style="position:relative">
<clusterize :data="rowsData" auto-height>In this case clusterize will always fill the nearest parent element with either position:relative; or position:absolute;.
Keep in mind, that padding of the parent will be ignored. If you need a padding, use a wrapper <div>.
The clusterize instance emits two events to get dynamic data:
<clusterize @get-data="getData" @get-data-count="getDataCount">methods:
# For the first datapiece, first and last will be 0
getData: function(first,last,cb) {
# somehow get data
cb(data)
}
getDataCount: function(cb) {
cb(dataCount)
}To issue a manual redraw, call redraw() on the clusterize instance.
If you want to enforce a scroll-to-top use the scrollTop prop.
When using the flex prop, the usage changes. You will now recieve a array of row items per row which you can use in a v-for:
<clusterize :data="rowsData" flex>
<div style="display:flex;align-items:center;justify-content:space-between">
<div v-for="d in data">{{d}}</div>
</div>
</clusterize>The row height, items per row and rows per cluster will be recalculated on resize of clusterize.
Clone repository.
npm install
npm run testBrowse to http://localhost:8080/.
- use html5 history mode or document.store to save scroll position
Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.