element-ui drawer 穿过遮罩层点击遮罩层下面的元素

对于element-ui的drawer组件，它默认有一个遮罩层，使得用户只能与drawer交互，而不能与遮罩层下面的元素交互。如果你想要实现穿过遮罩层点击遮罩层下面的元素，可以使用drawer组件的mask-closable属性。将mask-closable设置为false，即可实现穿过遮罩层点击遮罩层下面的元素。具体实现方式如下：

<el-drawer :mask-closable="false">
  <!-- drawer内容 -->
</el-drawer>

这样设置之后，用户就可以点击遮罩层下面的元素了。

相关问题

element-ui drawer 穿过遮罩层触发点击事件

如果你想要在 Element UI 的 Drawer 组件的遮罩层上触发点击事件，可以使用 `@click` 事件和 `append-to-body` 属性。

具体来说，你需要给 Drawer 组件添加 `@click.native` 事件，并在事件处理函数中判断点击的元素是否是遮罩层，如果是，则触发你想要执行的操作。同时，你还需要将 Drawer 组件的 `append-to-body` 属性设置为 `true`，这样 Drawer 组件才能被添加到 body 元素下，从而穿过遮罩层。

下面是一个示例代码：

<el-drawer title="Drawer" :visible="visible" :modal="true" :append-to-body="true" @click.native="handleClick">
  <!-- Drawer 内容 -->
</el-drawer>

methods: {
  handleClick(event) {
    if (event.target.classList.contains('el-drawer__wrapper')) {
      // 在遮罩层上点击时执行的操作
    }
  }
}

在 `handleClick` 方法中，我们判断点击的元素是否具有 `el-drawer__wrapper` 类名，如果是，则说明点击的是遮罩层，此时可以执行你想要的操作。

element-ui drawer 点击遮罩层触发遮罩层下面元素的事件

如果你想要在 Element UI 的 Drawer 组件的遮罩层上点击时触发遮罩层下面元素的事件，可以使用 `@mousedown` 事件和 `append-to-body` 属性。

具体来说，你需要给 Drawer 组件添加 `@mousedown.native` 事件，并在事件处理函数中判断点击的元素是否是遮罩层，如果是，则阻止事件的默认行为，从而不会将点击事件传递给 Drawer 组件。然后，你需要将 Drawer 组件的 `append-to-body` 属性设置为 `true`，这样 Drawer 组件才能被添加到 body 元素下，从而穿过遮罩层。

下面是一个示例代码：

<el-drawer title="Drawer" :visible="visible" :modal="true" :append-to-body="true" @mousedown.native="handleClick">
  <!-- Drawer 内容 -->
</el-drawer>

methods: {
  handleClick(event) {
    if (event.target.classList.contains('el-drawer__wrapper')) {
      event.preventDefault();
    }
  }
}

在 `handleClick` 方法中，我们判断点击的元素是否具有 `el-drawer__wrapper` 类名，如果是，则说明点击的是遮罩层，此时可以阻止事件的默认行为，从而不会将点击事件传递给 Drawer 组件，从而可以触发遮罩层下面元素的事件。