vue waterfall_Vue2的AutoHeight Waterfall组件

vue waterfall

vue2-瀑布 (vue2-waterfall)

An AutoHeight Waterfall Component For Vue2.

Vue2的AutoHeight Waterfall组件。

View demo 查看演示 Download Source 下载源

安装 (Install)

安装vue2-waterfall (Install vue2-waterfall)

npm install vue2-waterfall

导入vue2-瀑布 (Import vue2-waterfall)

ES6/commonjs import style is supported.

支持ES6 / commonjs导入样式。

// ES6
import {Waterfall, WaterfallItem} from 'vue2-waterfall';

// commonjs
const Waterfall = require("vue2-waterfall").Waterfall;
const WaterfallItem = require("vue2-waterfall").WaterfallItem;

or link as a script in an html file and access global variable Vue2Waterfall.

或链接为html文件中的script并访问全局变量Vue2Waterfall 。

<script src="dist/vue2-waterfall.js"></script>

用法 (Usage)

<Waterfall>
  <WaterfallItem>item1</WaterfallItem>
  <WaterfallItem>item2</WaterfallItem>
  <WaterfallItem>item3</WaterfallItem>
  ...
</Waterfall>

选项 (options)

瀑布属性 (Waterfall Attributes)

Option	Description	default	type	acceptable values
gutterWidth	the waterfall brick element horizontal gutter	0	Number	-
gutterHeight	the waterfall brick element vertical gutter	0	Number	-
resizable	triggers layout when browser window is resized	true	Boolean	'true' 'false'
align	Alignment	'center'	String	'left' 'center' 'right'
fixWidth	fix the waterfall component width	-	Number	-
minCol	min columns	1	Number	-
maxCol	max column	-	Number	-
percent	use Fluid layout, ignore waterfallitem width. such as [1, 1]	-	Array	-

选项	描述	默认	类型	可接受的值
gutterWidth	瀑布砖元素水平装订线	0	数	--
装订线高度	瀑布砖元素垂直排水沟	0	数	--
可调整大小	调整浏览器窗口大小时触发布局	真正	布尔型	'真假'
对齐	对准	'中央'	串	“左”“中”“右”
fixWidth	固定瀑布组件的宽度	--	数	--
minCol	最小列	1个	数	--
maxCol	最大列	--	数	--
百分	使用流体布局，忽略Waterfallitem宽度。 例如[1，1]	--	数组	--

WaterfallItem属性 (WaterfallItem Attributes)

Option	Description	default	type
order	The order of waterfallItem, often be set to index in v-for	-	Number
width	The width of waterfallItem	150	Number

选项	描述	默认	类型
订购	WaterfallItem的顺序，通常设置为在v-for中建立索引	--	数
宽度	瀑布宽度	150	数

大事记 (Events)

Option	Description
rendered	the waterfall component is rendered

选项	描述
呈现	瀑布组件被渲染

翻译自: https://vuejsexamples.com/an-autoheight-waterfall-component-for-vue2/

vue waterfall