Popover 弹出框
Popover 的属性与 Tooltip 很类似,它们都是基于Vue-popper
开发的,官网的用法为
<el-popover
placement="bottom"
title="标题"
width="200"
trigger="click"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
<el-button slot="reference">click 激活</el-button>
</el-popover>
官网效果并没有出现该问题。
<el-popover
placement="top"
width="400"
trigger="click"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
:append-to-body="false"
>
<i class="el-icon-info" slot="reference"></i>
</el-popover>
添加了以下属性
:append-to-body="false"
问题得到解决,但是查阅官网文档中发现并没有【append-to-body】这个属性值, 于是去翻阅【Vue-popper
】和【Element-UI弹出框】的相关文档。
『你不知道的ElementUI』被隐藏的神级组件:Popper和它的管家
最终发现,ElementUI
里所有弹出层的两种模式。
ElementUI
的弹出层(包括但不限于:dialog
, select
, popover
, date-picker
等)在元素定位上,都有两种实现方式,分别是:
- 方案一:
append-to-body
=== true。此模式下,弹出层会被放在<body>
元素上,通过position:fixed
定位,配合动态的top
和left
属性,完成弹出元素的定位。 - 方案二: 非
append-to-body
=== false。此模式下,弹出层通过position:absolute
定位,配合其父元素position:relative
来完成弹出元素的定位。
在大多数情况下, ElementUI
都是默认使用的 『方案一:append-to-body
=== true』。
原因很简单,因为『方案二: 非 append-to-body
式』 存在严重副作用,只有迫不得已的情况下才需要使用。