Element UI Popover组件多次点击后不再居中于触发节点的解决办法

在并排渲染多个popover组件的时候,当popover里面的内容宽度不一样,点击几次就会出现popover不再相对于触发DOM居中了,将出现很大的偏移。但是在触发滚动条或者改变窗口大小时,popover位置又会调整回来。这是因为element ui在使用的popper.js控件中监听了resize以及滚动事件,并在这两个事件中重新计算位置。

那么怎么利用这个事件调整位置呢,因为element ui进行了一层封装,并不直接对外暴露popper相关接口。但Popover组件对外提供了两个事件:show以及after-enter。可以利用这两个事件做点事情,方法如下:

1)在show事件中先隐藏popover组件

2)在after-enter中手工触发resize事件,然后在把popover显示出来

下面看下代码:

。。。 { {item.name}}
private beforeShowTreeL4Popover() {
		$('.tree-l4-popover').css('opacity', 0);
	}

	private showTreeL4Popover() {
		window.dispatchEvent(new Event('resize'));
		
		window.setTimeout(() => {
			$('.tree-l4-popover').css('opacity', 1);
		}, 0);
	}

设置opacity而不是display为了保持popover组件的位置信息。

你可能感兴趣的:(Vue,Vue2,Web前端,点滴技巧)