vue-bricks
v2.0.21-beta
[](https://www.npmjs.com/package/vue-bricks) [](https://github.com/Kuaizi-co/vue-bricks) [
> bricks.js for vue 2.x waterfall component
Thanks for
Install
``
> yarn add vue-bricksor
> npm i vue-bricks -S
Usage
$3
`js
// main.js
import Vue from 'vue'
import 'vue-bricks/lib/vueBricks.css'
import VueBricks from 'vue-bricks'
Vue.use(VueBricks)
new Vue({
render: h => h(App)
}).$mount('#app')
`
> Uncaught TypeError: Cannot assign to read only property 'exports' of object '#
It's set babel config to resolve, add sourceType: 'unambiguous':
`js`
// babel.config.js
module.exports = {
presets: [
'@vue/app'
],
// here
sourceType: 'unambiguous'
}
$3
` {{ scope.item.width }} * {{ scope.item.height }}html
:data="waterfallData"
:sizes="waterfallSizes"
:offset="100"
@reach="fetchwaterfallData(true)"
@update="done"
@pack="done"
>
, height: ${scope.item.height * 320 / scope.item.width}px
}">
{{ scope.item.name }}
`
Props
Name | Default | Description
-|-|-
data | undefined | Array, It's required
sizes| undefined | Array, It's required, An array of objects describing the grid's properties at different breakpoints. reference
packed| data-packed | String, An attribute added to the grid items after they're positioned within the grid. If the attribute is not prefixed with data-, it will be added.reference
position | true | A boolean, defaulting to true, indicating that the grid items should be positioned using the top and left CSS properties. reference
container| window | wrapper for bricks, the scroller
offset | 0 | when scroll to the page bottom near offset, It's trigger reach Event
API / Events
* pack
Used to pack all elements within the container.
`
* update
Used to pack elements without the packed attribute within the container.
`
* resize(size)
Used to add or remove the resize event handler. It's recommended that you add the resize handler when you create your instance.
`
You can get bricks instance Object to resolve
`
this.$refs.bricks.update()
this.$refs.bricks.pack()
this.$refs.bricks.resize(false)
Project setup
`
yarn serve
---
MIT LICENSE (c) www.kuaizi.ai