element-plus [Feature Request] [Enhancement] [popover] el-popover自动判断出现位置,从而不超出窗口

lg40wkob  于 2023-03-19  发布在  其他
关注(0)|答案(5)|浏览(704)

Feature type: Enhancement

Details

  • Enhanced compone nt name: popover

Description

在element-ui中,popover弹出框如果距窗口上方过近,则会出现在reference元素下方,反之则会出现在上方,从而使弹出框不会显示在窗口之外。
但是element-plus中这一特性消失了,请问是为什么呢?如果可以的话,还望能够加上。

Additional comments

(empty)

qvtsj1bj

qvtsj1bj1#

element-plus 的popover基於 popper.js ,文檔中有提到,其中props的popper-options可以向popper.js傳遞配置參數,你可以試試

uidvcgyl

uidvcgyl2#

这个特性目前是默认的,你这边是在什么组件遇到这个问题呢

tkqqtvp1

tkqqtvp13#

这个特性目前是默认的,你这边是在什么组件遇到这个问题呢

比如官网的这个例子,此时就已超出浏览器窗口了

h22fl7wq

h22fl7wq4#

浏览

正如 @czh740132583 所说,你可以传入popper.js的配置来解决这个问题

<template>
<el-popover :popper-options="options">
  <!-- ... -->
</el-popover>
</template>

<script setup>
const options = {
modifiers: [{
name: 'flip',
options: {
padding: 5,
fallbackPlacements: ['bottom-start', 'top-start', 'right', 'left'],
},
}]
}
</script>
nhaq1z21

nhaq1z215#

浏览

正如 @czh740132583 所说,你可以传入popper.js的配置来解决这个问题

<template>
<el-popover :popper-options="options">
  <!-- ... -->
</el-popover>
</template>

<script setup>
const options = {
  modifiers: [{
    name: 'flip',
    options: {
      padding: 5,
      fallbackPlacements: ['bottom-start', 'top-start', 'right', 'left'],
    },
  }]
}
</script>

是的这个配置是有效的,不过感觉还是应该有这个默认的特性

相关问题