Question

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

我假设重新安排窗格重置某些内容，并且有一种正确的方式来获取持久性事件处理程序。但我无法从文档中解决这个问题。

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
    });
//...
}

Answer 1

很可能您将resize处理程序绑定到某个中间布局对象，例如stack或column，这些可能会在您重新排列布局时被销毁并重新创建，在此过程中杀死你的听众。

您可以检查对象类型：

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

你应该绑定你的＆＃34;调整大小＆＃34;改为侦听组件的容器：

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

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

Answer 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'));

正确的方法来捕获GoldenLayout中窗格的调整大小事件

2 个答案: