vue-grid-layout 事件列表

vue-grid-layout grid-layout和grid-item完整的事件列表

事件列表

<grid-layout
            :layout="layout"
            :col-num="12"
            :row-height="30" 
            @layout-created="layoutCreatedEvent"
            @layout-before-mount="layoutBeforeMountEvent"
            @layout-mounted="layoutMountedEvent"
            @layout-ready="layoutReadyEvent"
            @layout-updated="layoutUpdatedEvent"
            @breakpoint-changed="breakpointChangedEvent"
    > 
        <grid-item v-for="item in layout"
                   :x="item.x"
                   :y="item.y"
                   :w="item.w"
                   :h="item.h"
                   :i="item.i"
                   :key="item.i"
                   @resize="resizeEvent"
                   @move="moveEvent"
                   @resized="resizedEvent"
                   @container-resized="containerResizedEvent"
                   @moved="movedEvent">
            {{item.i}}
        </grid-item>
</grid-layout>
<script>
    var app = new Vue({
        el: '#app',
        methods: {
            //****************** GridLayout ************************
            //对应Vue生命周期的created
            layoutCreatedEvent: function (newLayout) {
                console.log("Created layout: ", newLayout)
            },
            //对应Vue生命周期的beforeMount
            layoutBeforeMountEvent: function (newLayout) {
                console.log("beforeMount layout: ", newLayout)
            },
            //对应Vue生命周期的mounted
            layoutMountedEvent: function (newLayout) {
                console.log("Mounted layout: ", newLayout)
            },
            //当完成mount中的所有操作时生成的事件
            layoutReadyEvent: function (newLayout) {
                console.log("Ready layout: ", newLayout)
            },
            //更新事件（布局更新或栅格元素的位置重新计算）
            layoutUpdatedEvent: function (newLayout) {
                console.log("Updated layout: ", newLayout)
            },
            //每次断点值由于窗口调整大小而改变
            breakpointChangedEvent: function (newBreakpoint, newLayout) {
                console.log("断点=", newBreakpoint, ", layout: ", newLayout);
            },
            //****************** GridItem ************************
            //单元格移动时的事件
            moveEvent: function (i, newX, newY) {
                console.log("移动中 i=" + i + ", X=" + newX + ", Y=" + newY);
            },
            //单元格调整大小时的事件
            resizeEvent: function (i, newH, newW, newHPx, newWPx) {
                console.log("调整大小中 i=" + i);
            },
            //单元格移动后的事件
            movedEvent: function (i, newX, newY) {
                console.log("移动完成 i=" + i );
            },
            //单元格调整大小后的事件
            resizedEvent: function (i, newH, newW, newHPx, newWPx) {
                console.log("调整大小完成 i=" + i );
            },
            //单元格或单元格容器更改大小的事件（浏览器窗口或其他）
            containerResizedEvent: function (i, newH, newW, newHPx, newWPx) {
                console.log("容器大小改变了 i=" + i );
            }
        }
    });
</script>

在线试一试