element plus 的popover组件如何去自适应位置

问题

在使用 2.x 版本的element-UI时，里面的 Popover 气泡卡片 组件，有自带的 自动适应位置 的功能；在 element plus 中，直接使用，已经无法自适应气泡弹窗的位置了。

解决方式

想要在页面里，当 Popover 弹出框的位置接近边界时，应该自动切换到相反的方向进行显示。可添加以下代码实现：

<template>
    <el-popover
    placement="bottom"
    title="Title"
    :width="200"
    trigger="click"
    content="this is content, this is content, this is content"
    :fallback-placements="['bottom', 'top', 'right', 'left']"
  >
    <template #reference>
      <el-button>Click to activate</el-button>
    </template>
  </el-popover>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const visible = ref(false)
</script>

解析

核心：:fallback-placements="['bottom', 'top', 'right', 'left']"
注意： 适用于 ele-plus版本， 2.x 版本的 element 自带有这个功能；