Element-UI Drawer隐藏后如何保持子元素悬浮

Element-UI的Drawer组件默认通过v-if控制内部DOM的渲染，当visible属性设为false时，抽屉内部的全部DOM节点都会被移除，因此内部设置的悬浮元素也会一同消失。要解决这个问题，需要理解Drawer的渲染逻辑并针对性调整实现方式。

方案一：调整子元素挂载位置

将需要保持悬浮的子元素从Drawer内部移出，放到Drawer同级的位置，仅通过Drawer的显示状态控制子元素的定位，这样Drawer关闭时子元素不会被移除。

<template>
  <div>
    <!-- Drawer组件 -->
    <el-drawer
      title="抽屉标题"
      :visible.sync="drawerVisible"
      direction="rtl"
      size="30%">
      <p>抽屉内部内容</p>
    </el-drawer>
    <!-- 需要保持悬浮的子元素 -->
    <div
      v-show="drawerVisible"
      class="float-element">
      我是悬浮元素
    </div>
    <el-button @click="drawerVisible = true">打开抽屉</el-button>
  </div>
</template>

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

<style scoped>
.float-element {
  position: fixed;
  right: 31%; /* 比抽屉宽度略大，避免被抽屉遮挡 */
  top: 100px;
  width: 100px;
  height: 100px;
  background: #409eff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000; /* 确保层级高于抽屉 */
}
</style>

方案二：修改Drawer的append-to-body属性

Drawer组件默认会将自身挂载到body下，我们可以关闭append-to-body属性，同时修改子元素的定位父级，让子元素不随Drawer的DOM移除而消失。

<template>
  <div class="drawer-container">
    <el-drawer
      title="抽屉标题"
      :visible.sync="drawerVisible"
      direction="rtl"
      size="30%"
      :append-to-body="false">
      <p>抽屉内部内容</p>
    </el-drawer>
    <div class="float-element">
      我是悬浮元素
    </div>
    <el-button @click="drawerVisible = true">打开抽屉</el-button>
  </div>
</template>

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

<style scoped>
.drawer-container {
  position: relative;
}
.float-element {
  position: absolute;
  right: 0;
  top: 100px;
  width: 100px;
  height: 100px;
  background: #67c23a;
  color: #fff;
  z-index: 2000;
}
</style>

方案三：使用v-show控制Drawer显示

如果不需要Drawer关闭时销毁内部DOM，可以自定义Drawer的显示逻辑，用v-show替代默认的v-if渲染方式，这样内部子元素会一直存在。

<template>
  <div>
    <!-- 自定义抽屉显示逻辑 -->
    <div
      v-show="drawerVisible"
      class="custom-drawer">
      <div class="drawer-header">
        <span>抽屉标题</span>
        <el-button @click="drawerVisible = false">关闭</el-button>
      </div>
      <div class="drawer-body">
        <p>抽屉内部内容</p>
        <div class="float-element">我是悬浮元素</div>
      </div>
    </div>
    <el-button @click="drawerVisible = true">打开抽屉</el-button>
  </div>
</template>

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

<style scoped>
.custom-drawer {
  position: fixed;
  right: 0;
  top: 0;
  width: 30%;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 8px rgba(0,0,0,0.15);
  z-index: 2000;
}
.drawer-header {
  padding: 20px;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drawer-body {
  padding: 20px;
  position: relative;
}
.float-element {
  position: absolute;
  right: -120px;
  top: 100px;
  width: 100px;
  height: 100px;
  background: #e6a23c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

方案对比

开发者可以根据项目实际需求选择合适的方案，如果仅需要简单实现悬浮效果，优先选择调整挂载位置的方式，开发成本最低且兼容性最好。

Element_UIDrawer子元素悬浮vuevisible修改时间：2026-06-29 09:51:26