瀑布流vue-waterfall的高度设置

Posted 2020-10-21 两只小老虎

最近用vue做项目，用到了瀑布流vue-waterfall，其中遇到高度的设置问题，大概介绍下，希望可以帮到一些人

1、安装

npm install --save vue-waterfall

2、引入

ES6

* in xxx.vue */

 

import Waterfall from ‘vue-waterfall/lib/waterfall‘

import WaterfallSlot from ‘vue-waterfall/lib/waterfall-slot‘

 

/*

 * or use ES5 code (vue-waterfall.min.js) :

 * import { Waterfall, WaterfallSlot } from ‘vue-waterfall‘

 */

 

export default {

  ...

  components: {

    Waterfall,

    WaterfallSlot

  },

  ...

}

 

ES5

var Vue = require(‘vue‘)

var Waterfall = require(‘vue-waterfall‘)

 

var YourComponent = Vue.extend({

  ...

  components: {

    ‘waterfall‘: Waterfall.waterfall,

    ‘waterfall-slot‘: Waterfall.waterfallSlot

  },

  ...

})

 

3、Browser

<script src="path/to/vue/vue.min.js"></script>

<script src="path/to/vue-waterfall/vue-waterfall.min.js"></script>

 

or

 

new Vue({

  ...

  components: {

    ‘waterfall‘: Waterfall.waterfall,

    ‘waterfall-slot‘: Waterfall.waterfallSlot

  },

  ...

})

 

4、html structure

 

<waterfall :line-gap="200" :watch="items">

  <!-- each component is wrapped by a waterfall slot -->

  <waterfall-slot

    v-for="(item, index) in items"

    :width="item.width"

    :height="item.height"

    :order="index"

    :key="item.id"

  >

    <!--

      your component

    -->

  </waterfall-slot>

</waterfall>

 

5、Props

waterfall

name	default	description
line	v	v or h . Line direction.
line-gap	-	Required. The standard space (px) between lines.
min-line-gap	= line-gap	The minimal space between lines.
max-line-gap	= line-gap	The maximal space between lines.
single-max-width	= max-line-gap	The maximal width of slot which is single in horizontal direction.
fixed-height	false	Fix slot height when line = v .
grow	-	Number Array. Slot flex grow factors in horizontal direction when line = v . Ignore *-gap .
align	left	left or right or center . Alignment.
auto-resize	true	Reflow when window size changes.
interval	200	The minimal time interval (ms) between reflow actions.
watch	{}	Watch something, reflow when it changes.

 

 

 

 

 

 

 

 

 

waterfall-slot

name	default	description
width	-	Required. The width of slot.
height	-	Required. The height of slot.
order	0	The order of slot, often be set to index in v-for .
key	‘‘	The unique identification of slot, required for transition.
move-class	-	Class for transition. see vue-animated-list .