有没有办法确定抽屉面板是打开还是关闭

Is there a way to determine if drawerPanel is open or closed?

本文关键字:有没有      更新时间:2023-09-26

或者更确切地说,聚合物源中已经定义了天然方法?我确信我可以编写一个函数来轻松处理逻辑,但是我已经做了一些挖掘,并且没有提出任何关于已经实现的确定方法的方法。只是想知道我是否必须自己写一些东西。

编辑:刚刚意识到,即使我确实编写了一个 tagalong 函数来跟踪抽屉何时通过 toggleDrawer() 打开/关闭,当抽屉被滑动打开或滑动关闭时,它会被扔掉,所以我当然希望有一个本机方法。

编辑:使用XL链接我的页面@Justin信息,我做了一些测试,发现通过滑动或按下抽屉按钮关闭抽屉的一般打开触发了2个核心选择事件,但通过单击抽屉项目关闭触发了4。我已经设法提出了一个解决方案,该解决方案应该能够在任何时候根据 2 个变量确定抽屉是打开还是关闭。

drawerOpenIgnoreClose = false;
drawerOpen = false;
drawerEvent = 0;
drawer.addEventListener('core-select', function() {
    drawerEvent++;
    //console.log('drawerpanel event fired ' + drawerEvent);
    if (drawerEvent >= 2) {
        if (drawerOpenIgnoreClose) {
            drawerOpenIgnoreClose = false;
            console.log('drawer is closed, not from click of menu item');
        } else {
            drawerOpenIgnoreClose = true;
            console.log('drawer is open');
        }
        drawerEvent = 0;
    }
});

每次调用 drawerPanel.closerDrawer() 时,即每次单击菜单项时,drawerOpen 都设置为 false。然后我可以确定抽屉是否打开

function checkDrawer() {
    if (drawerOpen && drawerOpenIgnoreClose) {
        console.log('drawer is definitely open');
        return true;
    } else if (!drawerOpen || !drawerOpenIgnoreClose) {
        console.log('drawer is definitely closed');
        return false;
    }
}

抽屉外的按钮和抽屉内的按钮运行checkDrawer()(两者分别返回打开/关闭)还没有让我失望,但我会做更多的测试。我什至不知道这是否是最简单甚至正确的处理方式,但它似乎有效,我很高兴。

再次编辑:设法发现问题,如果滑动打开抽屉面板,checkDrawer()将重新关闭。我敢肯定,更多的逻辑会修复它。将进行一些调整。

我想你的意思是core-drawer-panel.

有一个narrow属性可以告诉您面板是否处于狭窄布局中。

或者,您可以订阅core-responsive-change事件并使用detail.narrow来确定。

您可以从此处阅读更多内容。

相关文章: