el-popover设置append-to-body='true'定位不准确，设置为false会被el-carousel裁剪。怎么解决？

Question

我在标签中使用了一个标签， 当设置append-to-body='true'时，它的定位不准确，直接定位到其reference所在的最大div上，而不是精确到reference的位置(主要是垂直方向偏移700个px)。故我此处使用了append-to-body='false',但是会被carousel的窗口边界自动裁剪遮罩，不论我怎么设置popper的z-index始终会被裁剪，而我需要popoer精确定位且完整显示。这个是否有解决方案？

<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.14/lib/index.js"></script>
<div id="app">
<template>
  <div class="block">
    <span class="demonstration">默认 Hover 指示器触发</span>
    <el-carousel height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
  <div class="block">
    <span class="demonstration">Click 指示器触发</span>
    <el-carousel trigger="click" height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <el-popover trigger="click" :append-to-body="false">
          <div class="test"></div>
            <div slot="reference">
              <h3 class="small">{{ item }}</h3>
            </div>
        </el-popover>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
</div>

@import url("//unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css");
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
.test {
  min-height:300px;
  max-height:300px;
  background-color:white; 
}

new Vue().$mount('#app')

Answer 1

上午好☀️☀️☀️️
本答案参考ChatGPT-3.5

这个问题是因为el-carousel组件内部进行了自适应处理，并没有考虑容器的高度限制。我们需要使用自适应容器来解决问题。 以下是两种可能的解决方案：

第一种解决方案：自适应处理

<div class="block">
  <el-carousel height="auto" :data="items" trigger="click" width="300">
    <el-carousel-item v-for="item in items" :key="item">
      <el-popover trigger="click" :append-to-body="false">
        <div class="test"></div>
        <div slot="reference">
          <h3 class="small">{{ item }}</h3>
        </div>
      </el-popover>
    </el-carousel-item>
  </el-carousel>
</div>

在这个解决方案中，我们创建了一个el-carousel组件，并设置了高度为auto，这意味着该元素将自适应容器的高度。同时，我们将数据传递给组件，这样el-carousel就可以基于这些数据动态地添加或删除组件。

另一种解决方案是调整el-carousel的样式以适应容器的高度。这可以通过使用position: absolute和left: 0等属性来实现。

<div class="block">
  <el-carousel height="auto" :data="items" trigger="click" width="300" position: absolute left: 0 top: 0>
    <el-carousel-item v-for="item in items" :key="item">
      <el-popover trigger="click" :append-to-body="false">
        <div class="test"></div>
        <div slot="reference">
          <h3 class="small">{{ item }}</h3>
        </div>
      </el-popover>
    </el-carousel-item>
  </el-carousel>
</div>

在这个解决方案中，我们设置了position: absolute属性来使其始终保持在容器的中心，然后将其位置设为top: 0（即元素的顶部）以确保元素不会被屏幕遮挡。