Element Plus el-drawer 组件交互问题解析与解决方案

在 Vue3 项目里用 el-drawer 做侧边栏很常见，但有时候抽屉一弹出来，页面其他地方就点不动了。一开始以为是样式写挂了，后来查了下，还是遮罩层和 z-index 那点事。

el-drawer 默认会渲染一个全屏遮罩层，也就是 modal。这个遮罩层靠 z-index 盖在页面内容上面，同时用 pointer-events 把点击事件拦下来，所以抽屉开着的时候，底下元素自然就接收不到交互了。

如果只是单个 drawer，问题还不太明显。一旦页面里同时有 el-dialog 和 el-drawer，层级就乱了。

el-dialog 的遮罩层默认 z-index 是 2000，el-drawer 的遮罩层默认是 1999。两个一起用的时候，这个默认值就可能造成冲突。

还有个容易忽略的地方是自定义样式。如果写样式时没处理好遮罩层选择器优先级，遮罩层覆盖范围可能不对，或者样式直接没生效。

如果你的场景不需要模态效果，直接给 el-drawer 传 :modal="false" 最省事。遮罩层整个不渲染，页面其他元素该点还能点。

<el-drawer
  v-model="visible"
  :modal="false"
  direction="rtl"
  size="30%"
>
  <template #title>
    <h4>无遮罩层模式</h4>
  </template>
  <p>抽屉内容...</p>
</el-drawer>

有些场景需要保留遮罩层，但又希望点击穿透，可以用 modal-class 给遮罩层加个自定义类，然后设置 pointer-events: none。

这样遮罩层视觉上还在，但不会拦截点击。背景色也可以顺带调一下。

<el-drawer
  v-model="visible"
  modal-class="custom-modal"
  direction="rtl"
  size="30%"
>
  <template #title>
    <h4>自定义遮罩层</h4>
  </template>
  <p>抽屉内容...</p>
</el-drawer>

<style>
.custom-modal {
  background-color: rgba(0, 0, 0, 0.3);
  pointer-events: none; /* 允许穿透点击 */
}
</style>

如果页面里 dialog 和 drawer 都要用，层级不能靠默认值硬扛。

一个办法是给 modal-class 对应的遮罩层固定 z-index，比如 dialog 用 2000，drawer 用 1999。另一种是动态层级，用计算属性根据当前激活的组件设置 z-index，确保正在操作的组件在最上面。

<el-dialog :z-index="2000">
  <!-- 对话框内容 -->
</el-dialog>

<el-drawer
  v-model="visible"
  modal-class="drawer-modal"
  direction="rtl"
  size="30%"
>
  <!-- 抽屉内容 -->
</el-drawer>

<style>
.drawer-modal {
  z-index: 1999 !important;
}
</style>

嵌套 drawer 的时候，建议保持 append-to-body 为 true，默认就是这样，可以避免父组件样式干扰。

然后用 custom-class 单独控制抽屉面板的样式，比如定位和高度。注意 position 要写成 fixed，不然在嵌套结构里容易跑偏。

<el-drawer
  v-model="visible"
  :append-to-body="true"
  custom-class="nested-drawer"
  direction="rtl"
  size="30%"
>
  <!-- 嵌套抽屉内容 -->
</el-drawer>

<style>
.nested-drawer {
  position: fixed !important;
  top: 50px;
  right: 0;
  height: 80%;
}
</style>

实际用下来，有几个点要留意。交互需求先想清楚，不需要模态效果就把遮罩层关掉。样式隔离用 scoped 或者 CSS Module，避免自定义样式影响到别的组件。

性能上可以开 destroy-on-close，关闭时把隐藏的 DOM 节点销毁，减少内存占用。响应式这块，用媒体查询调整抽屉尺寸和位置就行。

这些方案处理 el-drawer 的交互问题基本够用，也能保持组件灵活可扩展。实际项目里按需求选合适的方案，官方文档里的建议还是值得翻一翻。

lcjmSSL支持通过DNS接口自动化验证，目前已集成多家主流DNS服务商。你只需授权API密钥，系统即可自动添加、删除验证记录，实现完全自动化的域名控制权验证，适合批量域名管理场景。