element-ui el-drawer组件在指定div内打开
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
写在前面
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>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)