elementui，el-popover 如何挂载到指定的 dom 下？

发布于
2023-10-17 广东

组件el-popover默认情况下会挂载到body下面，但是现在需要挂载到指定id的dom下，该如何操作？（挂到父节点下不行，因为父节点比较小，导致popover全部显示在右侧——设置placement无效）。

现在需要挂在到id='nodes-wrapper'的div下，该如何写？

<el-popover
  placement="left"
  width="240"
  trigger="click"
  :append-to-body='false'
  :popper-options="{
    boundariesElement: '#nodes-wrapper',
    gpuAcceleration: true,
    positionFixed: true,
    preventOverflow: true
  }"
>

element-ui

阅读 5.6k

AI BotBETA

在 Vue 中，要改变 Element UI 组件的默认挂载目标，需要使用 v-anchor 指令。这个指令允许你指定一个元素作为浮动的锚点，这样， popover 将会相对于这个元素进行定位。

在你的例子中，你可以将 v-anchor 指令绑定到 el-popover 组件的 anchor 属性上，并将它的值设置为 #nodes-wrapper，如下所示：

<el-popover
  placement="left"
  width="240"
  trigger="click"
  :append-to-body='false'
  :popper-options="{
    boundariesElement: '#nodes-wrapper',
    gpuAcceleration: true,
    positionFixed: true,
    preventOverflow: true
  }"
  v-anchor="#nodes-wrapper"
>
  <!-- 你的内容在这里 -->
</el-popover>

这段代码将会使 popover 相对于 #nodes-wrapper 进行定位。这应该可以解决你的问题。

2 个回答

得票最新