3

当发生调整大小事件（无论是调整窗格大小、整个浏览器还是缩放）时，我想在一个窗格（即容器内容项）中执行一项操作。下面的工作，但是......如果我然后在窗格中拖动，甚至从左到右，到右左，或上下，它停止工作。

我假设重新排列窗格会重置某些东西，并且有一种正确的方法来获取持久事件处理程序。但我无法从文档中解决。

myLayout.on('initialised',initPanes);

function initPanes(){
myLayout.root.contentItems[0].contentItems[0].on('resize',function(){
    console.log("First pane resized");  //TEMP
    });
myLayout.root.contentItems[0].contentItems[1].on('resize',function(){
    console.log("Second pane resized");  //TEMP
    });
//...
}
4

2 回答 2

4

很可能您将resize处理程序绑定到某个中间布局对象，例如stackor column，当您重新安排布局时，这些对象可能会被销毁并重新创建，从而在此过程中杀死您的侦听器。

您可以像这样检查对象类型：

%myLayout.root.contentItems[0].contentItems[0].type
"stack"

您应该将“调整大小”侦听器绑定到组件的容器：

myLayout.on('componentCreated',function(component) {
    component.container.on('resize',function() {
        console.log('component.resize',component.componentName);
    });
});

以防止在重新排列布局时将其删除。

于 2017-04-18T11:33:09.067 回答
2

使用 GoldenLayout，如果您想在任何时候检测到某个面板被移动或调整大小，stateChanged 属性会捕获对布局的更改：

myLayout.on( 'stateChanged', function(){
            // do something
});

如果要检测特定面板的大小调整，可以使用ResizeObserver：

 let ro = new ResizeObserver( entries => {
 for (let entry of entries) {
           console.log(entry.contentRect.height + ", " + entry.contentRect.width);
           //do something with the height and width of the panel
       }
});

ro.observe(document.querySelector('#panel1'));
于 2020-04-07T16:54:43.447 回答