bootstrap Popover在设置内容后,使用.show()方法打开或悬停时关闭,

uoifb46i  于 4个月前  发布在  Bootstrap
关注(0)|答案(6)|浏览(85)

先决条件

描述问题

每当我手动打开一个弹出窗口后更新其内容(例如,在从API加载最终内容之后),在调用 setContent() 之后它再次关闭。

简化的测试用例

https://codepen.io/dkhalil/pen/eYreLbQ

你在哪个操作系统上看到这个问题?

Windows

你在哪个浏览器上看到这个问题?

Chrome

你使用的Bootstrap版本是什么?

v5.2.1

7gcisfzg

7gcisfzg1#

setContent()销毁了popper,然后显示它:
bootstrap/js/src/tooltip.js
第338行到第344行
| | setContent(content){ |
| | this._newContent=content |
| | if(this._isShown()){ |
| | this._disposePopper() |
| | this.show() |
| | } |
| | } |
我不确定在已经显示的情况下,是否可以在不销毁popper的情况下设置新的内容。
@GeoSot的想法呢?
但是我很好奇。一个弹出窗口与一个动作相关联,那么在需要实时更新的打开的弹出窗口中有什么用例呢?换句话说,为什么弹出窗口一开始就没有正确地显示内容?

hsvhsicv

hsvhsicv2#

嗯,只有在它已经打开时才会显示:if (this._isShown()) {
正如我在问题中提到的那样,在我的用例中,这是因为我想在弹出窗口打开时异步加载内容,首先显示一个加载动画,然后是内容。

mfpqipee

mfpqipee3#

好的,我读得太快了。我明白你的意思了。

72qzrwbm

72qzrwbm4#

快速回答:在第一次尝试中,波普无法正确呈现更改后的内容。因此,唯一的方法是关闭它并重新渲染。

kpbwa7wx

kpbwa7wx5#

好的,所以我现在在代码中用这个替换了 setContent :

instance.tip.querySelector('.popover-body').innerHTML = 'New Content'
instance.update()

这也可以是 bootstrap 的一个修复方法,但我现在没有足够的时间深入到代码库中进行一个合适的 PR

rryofs0p

rryofs0p6#

但是我很好奇。一个弹出窗口与一个动作相关联,那么在什么情况下我们需要打开一个必须实时更新的弹出窗口?换句话说,为什么一开始弹出窗口就没有显示正确的内容?
一个简单的例子:显示输入范围的值

相关问题