封装el-drawer 抽屉组件，点击遮罩层 虽然可以关闭，但是会报错父子流

封装`el-drawer`抽屉组件时，如果设置了一个点击遮罩层（mask）可以关闭抽屉的功能，但在实际操作过程中可能会遇到父子节点间的布局更新问题，也就是所谓的"父子流"冲突。Vue.js中，`el-drawer`组件默认包含在其父元素内，并且有z-index层级，当遮罩层关闭时，它试图改变其状态导致了整个子组件的DOM结构发生变化。

这个问题通常发生在处理动态显示/隐藏或者高度变化的子组件时，因为这会影响到父元素的高度计算，进而可能导致滚动区域的更新错误。为解决此问题，你可以尝试以下几种方法：

1. **阻止默认事件**：在遮罩层的点击事件中添加 `event.stopPropagation()` 阻止事件向上冒泡，防止影响到`el-drawer`的关闭逻辑。

this.$refs.drawerMask.addEventListener('click', (e) => {
  e.stopPropagation();
  this.drawerVisible = false;
});

2. **手动调整父元素高度**：在`drawerVisible`状态改变后，手动更新父元素的高度，避免由于抽屉高度变化引起的滚动区域问题。

this.$nextTick(() => {
  if (!this.drawerVisible) {
    this.parentElement.style.height = 'auto'; // 或者其他适合的恢复高度的方式
  }
});

3. **使用`v-if`或`v-show`**：考虑将`el-drawer`的显示与否通过条件渲染控制，而不是直接改变可见属性。这样可以在切换时更自然地管理DOM和样式。

<template>
  <div v-if="showDrawer">
    <!-- el-drawer内容 -->
    <div ref="drawerMask" @click.stop />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDrawer: true,
    };
  },
  methods: {
    toggleDrawer() {
      this.showDrawer = !this.showDrawer;
    },
  },
};
</script>