一個(gè)vue的可拖拽的瀑布流布局組件

lordharrd 發(fā)布于2019-08-20 18:53 / 3842人閱讀

摘要：是一個(gè)功能強(qiáng)大的瀑布流布局組件。支持用戶拖拽和對(duì)改變?cè)卮笮。⑻峁┫鄳?yīng)的事件進(jìn)行自定義操作。而且布局可以存儲(chǔ)和再展現(xiàn)。

vue-grid-layout是一個(gè)功能強(qiáng)大的瀑布流布局組件。支持用戶拖拽和對(duì)改變?cè)卮笮。⑻峁┫鄳?yīng)的事件進(jìn)行自定義操作。而且布局可以存儲(chǔ)和再展現(xiàn)。

安裝

通過NPM安裝

npm install vue-grid-layout

插件應(yīng)用

這是一個(gè)使用的例子

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,
        },
    });



        
            {{item.i}}

插件參數(shù)

參數(shù)	類型	默認(rèn)值	說明
autoSize	Boolean	true	是否根據(jù)內(nèi)容確定容器的高度
colNum	Number	12	列數(shù)
rowHeight	Number	150	行高
maxRows	Number	Infinity	最大的行高
margin	Array	[10, 10]	兩個(gè)可移動(dòng)元素間的距離
isDraggable	Boolean	true	是否支持推拽
isResizable	Boolean	true	是否支持改變大小
useCssTransforms	Boolean	true	是否使用自定義的過渡效果
verticalCompact	Boolean	true	是否使用verticalCompact布局
layout	Array	-	布局位置