vue可拖拽的瀑布流布局组件实现详解
作者：AshleyLv
这篇文章主要为大家介绍了vue的可拖拽的瀑布流布局组件有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
vue-grid-layout
vue-grid-layout是一个功能强大的瀑布流布局组件。支持用户拖拽和对改变元素大小，并提供相应的事件进行自定义操作。而且布局可以存储和再展现。
安装
通过NPM安装
npm install vue-grid-layout
插件应用
这是一个使用的例子
var testLayout = [
{"x":0,"y":0,"w":2,"h":2,"i":"0"},
{"x":2,"y":0,"w":2,"h":4,"i":"1"},
{"x":4,"y":0,"w":2,"h":5,"i":"2"},
{"x":6,"y":0,"w":2,"h":3,"i":"3"},
{"x":8,"y":0,"w":2,"h":3,"i":"4"},
{"x":10,"y":0,"w":2,"h":3,"i":"5"},
{"x":0,"y":5,"w":2,"h":5,"i":"6"},
{"x":2,"y":5,"w":2,"h":5,"i":"7"},
{"x":4,"y":5,"w":2,"h":5,"i":"8"},
{"x":6,"y":4,"w":2,"h":4,"i":"9"},
{"x":8,"y":4,"w":2,"h":4,"i":"10"},
{"x":10,"y":4,"w":2,"h":4,"i":"11"},
{"x":0,"y":10,"w":2,"h":5,"i":"12"},
{"x":2,"y":10,"w":2,"h":5,"i":"13"},
{"x":4,"y":8,"w":2,"h":4,"i":"14"},
{"x":6,"y":8,"w":2,"h":4,"i":"15"},
{"x":8,"y":10,"w":2,"h":5,"i":"16"},
{"x":10,"y":4,"w":2,"h":2,"i":"17"},
{"x":0,"y":9,"w":2,"h":3,"i":"18"},
{"x":2,"y":6,"w":2,"h":2,"i":"19"}
];
var GridLayout = VueGridLayout.GridLayout;
var GridItem = VueGridLayout.GridItem;
new Vue({
el: '#app',
components: {
GridLayout,
GridItem,
},
data: {
layout: testLayout,
},
});<grid-layout
:layout="layout"
:col-num="12"
:row-height="30"
:is-draggable="true"
:is-resizable="true"
:vertical-compact="true"
:margin="[10, 10]"
:use-css-transforms="true">
<grid-item v-for="item in layout"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i">
{{item.i}}
</grid-item>
</grid-layout>插件参数
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| autoSize | Boolean | true | 是否根据内容确定容器的高度 |
| colNum | Number | 12 | 列数 |
| rowHeight | Number | 150 | 行高 |
| maxRows | Number | Infinity | 最大的行高 |
| margin | Array | [10, 10] | 两个可移动元素间的距离 |
| isDraggable | Boolean | true | 是否支持推拽 |
| isResizable | Boolean | true | 是否支持改变大小 |
| useCssTransforms | Boolean | true | 是否使用自定义的过渡效果 |
| verticalCompact | Boolean | true | 是否使用verticalCompact布局 |
| layout | Array | - | 布局位置 |
以上就是vue的可拖拽的瀑布流布局组件的详细内容，更多关于vue可拖拽瀑布流组件的资料请关注脚本之家其它相关文章！