- Notifications
You must be signed in to change notification settings - Fork33
vue-comps/vue-clusterize
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
An implementation ofClusterize.js invue.
Works similar tov-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 forwebpack workflows.
No jQuery dependency
npm install --save-dev vue-clusterize
use version 0.2.0 before vue1.0.24
# link the components upcomponents:"clusterize":require("vue-clusterize")# or ES6importclusterizefrom"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 --><pslot="loading">loading...</p></clusterize>
For examples seedev/.
| Name | type | description |
|---|---|---|
| data | Object | a single datapiece (seebinding-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 therow-watchers prop.
example:
<clusterize@get-data="getData"><divv-if="!loading"v-bind:style="{height:height+'px'}">{{data}} - index: {{index}}</div><pslot="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 onready (callstart 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. Seeflex. |
| 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:
<htmlstyle="height:100%"><bodystyle="height:100%"><divstyle="position:relative"><clusterize:data="rowsData"auto-height>
In this case clusterize will always fill the nearest parent element with eitherposition:relative; orposition:absolute;.
Keep in mind, thatpadding 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: #Forthefirstdatapiece,firstandlastwillbe0 getData:function(first,last,cb){ #somehowgetdatacb(data)} getDataCount:function(cb){cb(dataCount)}
To issue a manual redraw, callredraw() on the clusterize instance.
If you want to enforce a scroll-to-top use thescrollTop prop.
When using theflex prop, the usage changes. You will now recieve a array of row items per row which you can use in av-for:
<clusterize:data="rowsData"flex><divstyle="display:flex;align-items:center;justify-content:space-between"><divv-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 installnpm runtestBrowse tohttp://localhost:8080/.
- use html5 history mode or document.store to save scroll position
Copyright (c) 2016 Paul PflugradtLicensed under the MIT license.
About
clusterize in vue
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.