通过为el-popover添加配置项,将其挂载到父级上面:
<el-popover
:append-to-body="false"
:popper-options="{
boundariesElement: 'body',
gpuAcceleration: true,
positionFixed: true,
preventOverflow: true}">
</el-popover>
设置自定义样式:如果我们使用了scoped并需要添加样式,只需要在组件内添加样式即可,不需要到全局添加。
<el-popover
popper-class="my-popover"
:append-to-body="false"
:popper-options="{
boundariesElement: 'body',
gpuAcceleration: true,
positionFixed: true,
preventOverflow: true}"
>
</el-popover>
/deep/.my-popover {...}
截图看效果:
注意事项: 因为el-popover本身自带一个绝对定位,需要给父组件添加相对定位,否则可能导致定位错乱。