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>