如何禁用MUI可滑动边缘Drawer的临时触摸打开效果？

要禁用触摸边缘时的临时打开（peek）行为，避免向上滑动时的抽屉闪烁问题，你可以通过配置SwipeableDrawer的swipeableEdge属性实现，具体步骤如下：

核心解决方案：禁用边缘触摸的Peek效果 #

MUI的SwipeableDrawer默认在触摸边缘时触发临时打开的peek行为，我们可以通过swipeableEdge对象中的disablePeek属性直接禁用该功能，只保留滑动触发永久打开的交互。

修改代码示例 #

找到项目中的SwipeableDrawer组件，将原有的swipeableEdge属性替换为包含disablePeek: true的配置对象：

import SwipeableDrawer from '@mui/material/SwipeableDrawer';

// ...其他业务代码

<SwipeableDrawer
  edge="left" // 根据你的实际边缘设置调整
  open={open}
  onClose={handleClose}
  onOpen={handleOpen}
  // 禁用触摸边缘的临时打开行为
  swipeableEdge={{ disablePeek: true }}
>
  {/* 抽屉内部内容 */}
</SwipeableDrawer>

备选方案：自定义触摸事件控制（针对旧版本MUI） #

如果你的MUI版本不支持disablePeek属性，可以通过自定义onSwipeableEdgeTouchStart事件阻止默认的peek行为：

<SwipeableDrawer
  edge="left"
  open={open}
  onClose={handleClose}
  onOpen={handleOpen}
  swipeableEdge={{
    onTouchStart: (event) => {
      // 阻止默认的peek触发逻辑
      event.stopPropagation();
    },
  }}
>
  {/* 抽屉内部内容 */}
</SwipeableDrawer>

修改后，触摸边缘不会再触发临时打开，只有向上滑动的动作才会触发抽屉的永久打开，从而解决两种交互冲突导致的闪烁问题。

内容的提问来源于stack exchange，提问作者Liv Stan