瀑布流vue-waterfall的高度设置

时间：2018-01-18 17:49:12 阅读：2116 评论：0 收藏：0 [点我收藏+]

最近用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

...

}

ES5var 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
namedefaultdescription


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
namedefaultdescription


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 .

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.

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 .

瀑布流vue-waterfall的高度设置

原文：https://www.cnblogs.com/liangzhixiaolaohu/p/8311475.html

踩

(5)

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)