嵌套el-drawer

嵌套`El-Drawer`是指在Element UI库中的抽屉组件（Drawer）被另一个`Drawer`包裹起来，形成层次结构。这种设计常用于需要多个独立可展开的内容区域的应用场景，比如导航菜单中，一个一级抽屉展示侧边栏，而二级抽屉可以在一级抽屉内打开，用于显示更详细的信息或者下级菜单。

在使用时，你需要确保每个级别的`Drawer`都有正确的关闭逻辑，并且它们可以响应彼此的开启和关闭事件。例如，当二级抽屉关闭时，一级抽屉通常会恢复可见。Element UI提供了一套API和指令来方便管理这样的层级结构。

下面是一个简单的例子：

<template>
  <el-container>
    <!-- 一级抽屉 -->
    <el-drawer
      v-model="isFirstDrawer"
      width="20%"
      :before-close="handleFirstClose"
    >
      <div slot="header">一级抽屉</div>
      <button @click="openSecondDrawer">打开二级抽屉</button>
    </el-drawer>

    <!-- 主体内容区域 -->
    <el-container>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-drawer
        v-model="isSecondDrawer"
        :width="40%"
        :visible.sync="showSecondDrawer"
      >
        <div slot="header">二级抽屉</div>
        <!-- 内容... -->
      </el-drawer>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      isFirstDrawer: false,
      isSecondDrawer: false,
      showSecondDrawer: false,
    };
  },
  methods: {
    openSecondDrawer() {
      this.showSecondDrawer = true;
    },
    handleFirstClose() {
      this.isSecondDrawer = false;
    },
  },
};
</script>