el-dialog 导致无法触发背后图层的鼠标事件的解决方法

   <div class="alldialog">
      <el-dialog
        v-model="monitorFlag"
        width="48%"
        class="ggddialogs"
        draggable
        :modal="false"
        :close-on-click-modal="false"
      >
        <template #header="{ close, titleId, titleClass }">
          <div class="my-header">
            <div :id="titleId" class="constenle">
              {{ details.vehicleCategory }} {{ details.plateNumber }}
            </div>
          </div>
        </template>
        <div class="monitorPop" v-if="monitorFlag">
            内容
        </div>
      </el-dialog>
    </div>

属于最上层的图层，后面的图层会被它覆盖，导致触发不了后面图层的鼠标事件，上图是解决了这个问题之后可以点击的状态。

解决方法：

给 el-dialog 增加一个父元素，给此父元素增加样式：pointer-events: none;

再给 .el-dialog 增加样式：pointer-events: auto;

css 

<style scoped lang="scss">
::v-deep .ggddialogs {
  height: 250px;
  left: 28%;
  position: absolute;
  margin: 0 !important;
  bottom: 20px;
  ::v-deep.el-dialog__header {
    margin-bottom: -20px;
    ::v-deep .el-dialog__headerbtn {
      top: -12 !important;
    }
  }
  .el-dialog__body {
    // height: 690px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: auto;
  }
}
.alldialog {
  width: 0px;
  pointer-events: none;
  ::v-deep .el-dialog__wrapper {
    pointer-events: none;
  }
  // 弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）
  ::v-deep .el-dialog {
    pointer-events: auto !important;
  }
  ::v-deep .el-dialog__body {
    pointer-events: auto !important;
  }
}
</style>