el-popover里的内容超出

### 解决 Element UI `el-popover` 内容超出容器的问题

当遇到 `el-popover` 的内容超出其容器边界的情况时，可以采取多种方法来优化显示效果并确保用户体验良好。

#### 方法一：调整 Popover 定位参数

通过设置 `offset` 属性微调弹窗位置，使内容更好地适应页面布局。此外，还可以尝试不同的方位选项 (`placement`) 来找到最适合当前场景的位置[^1]：

<el-popover
  placement="bottom"
  offset="-20" <!-- 调整偏移量 -->
  width="400"
  trigger="click">
</el-popover>

#### 方法二：自定义样式控制溢出行为

利用 CSS 自定义类名覆盖默认样式，针对特定情况下的 overflow 处理方式进行定制化修改。例如，在某些情况下允许水平方向上的自动滚动条出现而保持垂直方向不变:

.popover-custom {
    max-height: calc(80vh - 100px); /* 设置最大高度 */
    overflow-y: auto;               /* 增加纵向滚动条 */
}

然后将其应用到组件中：

<el-popover
  custom-class="popover-custom"> <!-- 添加自定义class -->
</el-popover>

#### 方法三：动态计算并适配尺寸

对于更复杂的需求，可以通过 JavaScript 动态获取视口大小以及 popover 所处的具体环境信息 (如父级元素宽度)，从而实时调整 popover 尺寸以防止越界现象发生。这种方法适用于那些需要精确控制展示区域的应用场合[^2]:

// 获取 DOM 元素实例
const popperElm = this.$refs['myPopover'].$refs['popper'];
if (!popperElm) return;

// 计算可用空间
let rect = document.body.getBoundingClientRect();
let parentRect = this.$parent.$el.getBoundingClientRect();

// 更新 popover 高度/宽度属性...
this.dynamicWidth = Math.min(parentRect.width * 0.9, 600);
this.dynamicHeight = Math.max(rect.height / 3, 200);

// 绑定至 data 或者其他响应式变量用于模板渲染

对应 HTML 结构如下所示：

<template>
  <div ref="container">
      <el-popover
        v-bind="$attrs"
        :width="dynamicWidth"
        :height="dynamicHeight"
        @show="handleShow()">
          ...
      </el-popover>
  </div>
</template>

<script>
export default {
  name: 'CustomPopver',
  data() {
    return {
      dynamicWidth: null,
      dynamicHeight: null
    };
  },
  methods: {
    handleShow() { ... }
  }
};
</script>

以上三种方式可以根据实际项目中的具体情况进行选择或组合使用，以达到最佳视觉呈现效果的同时也兼顾了交互体验的要求。