实现如图

elementUI官网实现的样例都是在整个屏幕展开抽屉

需要实现的是，点击头部的按钮，只在子组件展开抽屉且遮罩不遮住头部，需实现的样式如上图

实现方法

在mian.vue页面中也就是页面嵌套的父组件

首先把页面分成上下两块布局

<template><div calss="container"><el-header><i class="el-icon-s-unfold" @click="visible = true"></i><h2 style="display: inline-block;margin-left: 20px">Header</h2></el-header><el-main><h1>Body</h1></el-main></div>
</template>
<script>// @ is an alias to /srcexport default {name: 'main',}
</script>
<style>.el-header {color: #333;padding: 0 !important;height: 50px!important;background: antiquewhite;}.el-main {height: 100%;padding: 0!important;}
</style>

然后把抽屉组件放在el-main中

关于el-drewer的需要用到的属性

visible.sync   是否显示 Drawer，支持 .sync 修饰符

with-header    控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效

direction      Drawer 打开的方向

需要给el-main也就是el-drawer的父组件加上style样式

overflow: hidden;
position: relative;

给el-drawer加上样式 style="position:absolute"

并且设置z-index = “-1”         ！！！一定要加，要不然遮罩层会把顶部标题给遮住

z-index在elementUI中并没有说明，是通过谷歌的vue插件看到的

如何在谷歌中加入vue插件

https://blog.csdn.net/yizufengdou/article/details/103985709

下面是全部代码

<template><div calss="container"><el-header><i class="el-icon-s-unfold" @click="visible = true"></i><h2 style="display: inline-block;margin-left: 20px">Header</h2></el-header><el-main><el-drawertitle="我是标题":visible.sync="visible":with-header=falsestyle="position: absolute"direction="ltr"z-index="-1"><span>抽屉组件</span></el-drawer><h1>Body</h1></el-main></div>
</template><script>// @ is an alias to /srcexport default {name: 'main',data() {return {visible: false,};},methods: {handleClose(done) {done()}}}
</script>
<style>.el-header {color: #333;padding: 0 !important;height: 50px!important;background: antiquewhite;}.el-main {height: 100%;padding: 0!important;overflow: hidden;position: relative;}
</style>