vue+elementUI el-drawer实现在子组件打开抽屉组件

实现如图

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

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

实现方法

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

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

然后把抽屉组件放在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

下面是全部代码