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 组件，从而可以触发遮罩层下面元素的事件。

element-ui 抽屉 教程

### Element UI 抽屉组件教程

Element UI 的抽屉 (`el-drawer`) 组件提供了一种侧边弹出的内容展示方式，适用于显示额外的信息或操作面板。以下是创建和配置 `el-drawer` 组件的方法[^1]。

#### 基本用法

要使用 `el-drawer`，首先需引入 Element UI 库并注册该组件：

<template>
  <div id="app">
    <!-- 触发按钮 -->
    <button @click="drawerVisible = true">打开抽屉</button>

    <!-- 抽屉组件 -->
    <el-drawer :visible.sync="drawerVisible" title="这是标题">
      <p>一些文字说明。</p>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false,
    };
  },
};
</script>

此代码片段展示了如何通过点击按钮来控制抽屉的显隐状态，并设置了简单的内部内容与标题。

#### 配置属性

可以自定义多个属性来自定义抽屉的行为和外观，例如方向、大小等：

| 属性名 | 描述 |
| --- | --- |
| direction | 设置抽屉滑动的方向，默认为rtl (右至左)，可选值还有ltr(左至右),ttb(上至下),btb(下至上)|
| size | 定义抽屉宽度（对于水平方向）或高度（垂直方向），默认是30%|

更多高级设置可以通过查阅官方文档获得支持。