element-ui el-drawer组件在指定div内打开

写在前面

        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>