vue-bricks
[![npm](https://img.shields.io/npm/v/vue-bricks.svg)](https://www.npmjs.com/package/vue-bricks) [![Travis](https://img.shields.io/travis/Kuaizi-co/vue-bricks.svg)](https://github.com/Kuaizi-co/vue-bricks) [![Coveralls](https://img.shields.io/coveralls/Kua
Last updated a year ago by tomieric .
Original npm · Tarball · package.json
$ cnpm install vue-bricks 
SYNC missed versions from official npm registry.

vue-bricks

npm Travis Coveralls Github All Releases npm

bricks.js for vue 2.x waterfall component

中文文档

Thanks for

Install

> yarn add vue-bricks
# or
> npm i vue-bricks -S

Usage

global component

// 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 '#<Object>'

It's set babel config to resolve, add sourceType: 'unambiguous':

// babel.config.js
module.exports = {
  presets: [
    '@vue/app'
  ],
  // here
  sourceType: 'unambiguous'
}

single component

<template>
  <div class="waterfall">
      <bricks
        ref="bricks"
        :data="waterfallData" 
        :sizes="waterfallSizes"
        :offset="100"
        @reach="fetchwaterfallData(true)"
        @update="done"
        @pack="done"
    >
        <template slot-scope="scope">
          <div class="card">
            <img class="card-img-top" :src="scope.item.src" :alt="scope.item.name" :style="{ width: `320px`, height: `${scope.item.height * 320 / scope.item.width}px` }">
            <div class="card-block">
              <h4 class="card-title" :style="scope.item.style">{{ scope.item.name }}</h4>
              <p class="card-text">{{ scope.item.width }} * {{ scope.item.height }}</p>
            </div>
          </div>
        </template>
      </bricks>
      <div class="loading" :class="{ active: loading }">
        <data-loader>Loading</data-loader>
      </div>
    </div>
</template>

<script>
import Bricks from 'vue-bricks'
// or
// import Bricks from 'vue-brick/src/components/bricks.vue'
import dataLoader from './components/loader'

export default {
  components: {
    Bricks,
    dataLoader
  },
  data () {
    return {
      loading: true,
      waterfallData: [],
      waterfallSizes: [
        { columns: 4, gutter: 20 },
        { mq: '414px', columns: 1, gutter: 10 },
        { mq: '640px', columns: 1, gutter: 80 },
        { mq: '800px', columns: 2, gutter: 80 },
        { mq: '1024px', columns: 3, gutter: 15 },
        { mq: '1280px', columns: 3, gutter: 30 },
        { mq: '1366px', columns: 4, gutter: 15 },
        { mq: '1440px', columns: 4, gutter: 30 },
        { mq: '1980px', columns: 5, gutter: 40 }
      ]
    }
  },
  methods: {
    async refresh () {
      document.documentElement.scrollTop = 0
      await this.fetchwaterfallData(true)
      this.$nextTick(() => this.$refs.bricks.pack())
      // or
      /*imageReady(imgList)
          .then(() => {
            this.$refs.bricks.pack()
          })
      */
    },
    fetchwaterfallData (isReset) {
      return new Promise(resolve => {
        this.loading = true
        fetc('/api/waterfall?search=girl')
          .then(data => {
            if (isReset) {
              this.waterfallData = data
            } else {
              this.waterfallData.push(...data)
            }
            resolve(data)
          })
      })
    },
    done () {
      this.loading = false
    }
  },
  created () {
    this.fetchwaterfallData(true)
  }
}
</script>

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.

      <bricks @pack="handlePack" />
    
  • update

    Used to pack elements without the packed attribute within the container.

      <bricks @update="handleUpdate" />
    
  • 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.

      <bricks @resize="handleResize" />
    

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

Current Tags

  • 2.0.21-beta                                ...           beta (a year ago)
  • 2.0.0                                ...           latest (a year ago)

16 Versions

  • 2.0.0                                ...           a year ago
  • 2.0.21-beta                                ...           a year ago
  • 2.0.20-beta                                ...           a year ago
  • 2.0.19-beta                                ...           a year ago
  • 2.0.17-beta                                ...           a year ago
  • 2.0.11-beta                                ...           a year ago
  • 2.0.4-beta                                ...           a year ago
  • 2.0.3-beta                                ...           a year ago
  • 2.0.0-beta                                ...           a year ago
  • 1.0.7                                ...           2 years ago
  • 1.0.6                                ...           3 years ago
  • 1.0.5                                ...           3 years ago
  • 1.0.4                                ...           3 years ago
  • 1.0.3                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (2)
Downloads
Today 0
This Week 0
This Month 3
Last Day 0
Last Week 3
Last Month 10
Dependencies (1)
Dev Dependencies (11)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |