写在前面
element-ui组件库中的el-drawer默认是相对整个网页窗口呈抽屉形式打开,如果有开发需求要求在指定的div里面打开呢
具体实现
其实也很简单,核心是设置父元素position:relative或absolute,再设置el-drawer的position:absolute,使它相对于它的父元素定位
部分代码示例: (*注:vue语法环境)
<div style="height:680px">
<h2>这里是h2标题一!</h2>
<p>下面是el-drawer组件的父div</p>
<el-button @click="drawer = true">单击打开抽屉</el-button>
<div style="height:400px;position: relative">
<el-drawer
:visible.sync="drawer"
style="position: absolute;"
width="100%">
<span slot="title">抽屉标题xxx</span>
<div>el-drawer内容...</div>
</el-drawer>
</div>
<h2>这里是h2标题二!</h2>
<p>jklsjdklfjlks哈哈哈</p>
</template>
拓展记录:
el-drawer其实还具有z-index属性,这点跟el-scrollBar组件没有收录在官方文档但支持使用一样,如果发现加上了el-drawer之后发现显示层级有问题,遮挡了页面其他模块,可是配置z-index: -1
<el-drawer
:visible.sync="drawer"
style="position: absolute"
width="100%"
z-index="-1">
<span slot="title">抽屉标题xxx</span>
<div>el-drawer内容...</div>
</el-drawer>