如何在 div 中而不是在窗口中打开 element-ui 抽屉答案

【问题标题】：How to open a element-ui drawer in a div as opposed to window如何在 div 中而不是在窗口中打开 element-ui 抽屉
【发布时间】：2021-01-04 21:51:16
【问题描述】：

我试图让一个抽屉在 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 是什么。有人知道改变这种情况的方法吗？

【问题讨论】：

标签： css vue.js element-ui

【解决方案1】：

原来这就像添加 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>

【讨论】：