首页 文章

如何禁用背景菜单解雇 - Ionic 3

提问于
浏览
0

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

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

我已经尝试在背景和菜单上禁用指针事件,但似乎仍然发生了解雇 . 有什么想法吗?


有趣的发现;菜单关闭功能实际上看起来可能在离子内容上 . 这导致了一个问题:

  • 我希望用户能够在不关闭菜单的情况下使用离子内容与内容进行交互 .

1 回答

  • 0

    以下是如何在离子应用程序中执行此操作的示例代码 .

    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.查看

相关问题