element plus 中 Drawer 抽屉开启后不能点击外部元素问题

问题

在开发 vue3 项目的过程中，使用 Element Plus 的 Drawer 抽屉时抽屉弹出后点击外部元素没有反应。

解决方法

通过查看元素结构发现在自己代码中定义的 Drawer 抽屉组件中那层外面还多了一层 div 包裹。

因为抽屉组件本身是带有遮罩层，所以作者猜想这一层元素是 Drawer 抽屉组件的遮罩层元素，随后添加了关于遮罩层的配置属性来验证猜想。

经查，官网中关于遮罩层的配置属性就下面两个，于是乎作者便根据这两个属性来进行测试。

 

1、设置 modal （经测试后无法解决问题）

:modal="false"

测试后发现该属性并不能解决该问题，该属性仅仅是通过类似于v-show的方式设置遮罩层是否展示及隐藏，其元素还是会一直存在于文档流当中。

设置值为false：

设置值为true（默认值）：

2、设置 modal-class （成功解决问题）

modal-class="mask-layer"

添加类名后查看元素：

发现外层包裹的 div 添加了 mask-layer 类名，之后继续修改该元素的样式，因为是点击不到外部的元素，所以可能是遮罩层的层级较高将后面的元素覆盖了，所以作者对其宽度缩减到与抽屉组件相同的宽度。

<el-drawer
    :modal="false"
    modal-class="mask-layer"
    direction="ltr"
    :size="264"
></el-drawer>

::v-deep .mask-layer{
  width: 264px !important;
}

/*
	需要注意的是修改 mask-layer 需要进行样式穿透，
	需要使用css预处理器，并且添加 /deep/ 注释，
	因为作者使用的是 scss 所以需要使用 ::v-deep 格式
*/