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顯示出來

下面看下代碼：

<div v-for="item in treeL3" :key="item.id">
	<el-popover
		placement="bottom"
		popper-class="tree-l4-popover"
		@show="beforeShowTreeL4Popover"
		@after-enter="showTreeL4Popover"
		trigger="click">
							。。。
		<span class="name" slot="reference">{{item.name}}</span>
    </el-popover>
						
</div>

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組件的位置信息。