如何解决如何在div而不是window中打开Element-ui抽屉
相对于使用完整的可用窗口,我试图在div中弹出一个抽屉。
var Main = {
data() {
return {
drawer: false,direction: 'rtl',};
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
@import url("//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css");
.drawer-container{
height: 600px;
width: 600px;
border: 1px solid red;
}
.drawer{
height: 100%;
}
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<div id="app">
<el-radio-group v-model="direction">
<el-radio label="ltr">left to right</el-radio>
<el-radio label="rtl">right to left</el-radio>
<el-radio label="ttb">top to bottom</el-radio>
<el-radio label="btt">bottom to top</el-radio>
</el-radio-group>
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
open
</el-button>
<div class="drawer-container">
<el-drawer
class="drawer"
title="I am the title"
:visible.sync="drawer"
:direction="direction">
<span>Hi,there!</span>
</el-drawer>
</div>
</div>
我的问题是抽屉似乎完全忽略了父母css是什么。有谁知道改变这种状况的方法?
解决方法
事实证明,这就像添加position: relative
var Main = {
data() {
return {
drawer: false,direction: 'rtl',};
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
@import url("//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css");
.drawer-container{
height: 600px;
width: 600px;
border: 1px solid red;
}
.drawer{
position: relative;
height: 100%;
}
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<div id="app">
<el-radio-group v-model="direction">
<el-radio label="ltr">left to right</el-radio>
<el-radio label="rtl">right to left</el-radio>
<el-radio label="ttb">top to bottom</el-radio>
<el-radio label="btt">bottom to top</el-radio>
</el-radio-group>
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
open
</el-button>
<div class="drawer-container">
<el-drawer
class="drawer"
title="I am the title"
:visible.sync="drawer"
:direction="direction">
<span>Hi,there!</span>
</el-drawer>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。