如何禁用背景菜单关闭 - Ionic 3答案

【问题标题】：How To Disable Backdrop Menu Dismiss - Ionic 3如何禁用背景菜单关闭 - Ionic 3
【发布时间】：2020-10-16 20:37:01
【问题描述】：

我在查找这方面的文档时遇到了麻烦。

在 Ionic 中，菜单具有如果您单击背景，菜单会消失的功能。所以基本上点击菜单以外的任何地方，菜单就会消失。我想禁用此功能，以便用户可以与背景下方的项目进行交互。

我已尝试禁用背景和菜单上的指针事件，但似乎仍会发生关闭。有什么想法吗？

有趣的发现；菜单解除功能实际上看起来可能在离子内容上。这导致了一个问题：

我希望用户能够在不关闭菜单的情况下通过 ion-content 与内容进行交互。

【问题讨论】：

标签： ionic-framework ionic3

【解决方案1】：

对我来说，这有帮助：

ion-menu {
  pointer-events: none;
}

ion-menu > * {
  pointer-events: all;
}

【讨论】：

【解决方案2】：

这里是示例代码，您可以如何在您的 ionic 应用程序中执行此操作。

    import { Platform, MenuController } from 'ionic-angular';

// ... Other code

  constructor(menuCtrl: MenuController /* ... other code ...*/)

// ... Other code

  let menu = menuCtrl.get();

  menu.swipeEnable(false); // Disable drag to open/close

  // Override default behaviour of closing the menu on 
  // content or backdrop click
  menu['onBackdropClick'] = () => {
    // No-op  
  };

  menu.ionOpen.subscribe(() => {
    // When the menu is open ...

    // Remove Ionic's CSS rules for menu-content-open class that restricts 
    // mouse events on ion-nav
    menu.getContentElement().classList.remove("menu-content-open");

    // Reduce the size of the content pane so that it does not
    // overflow off the screen
    menu.getContentElement().style.width = 
      `calc(100% - ${menu.getMenuElement().clientWidth}px)`;
  });

  menu.ionClose.subscribe(() => {
    // When the menu is closed ...

    // Restore the size of the content pane
    menu.getContentElement().style.width = '';
  });

我做了一个 stackblitz 项目，你可以看看。您可以通过here.查看它

【讨论】：