【React】antd popover定位不准闪跳解决+自己实现popover库

前言

• 我在写H5-dooring时，发现我们用的popover会发生闪跳，而且第一次闪跳就算了，每次还会有另一个方向的闪跳。
• 于是我大概百度了下，基本都说需要给固定宽高即可，让后试了下发现没用，就算触发组件和弹窗元素都给了宽高，也一样闪跳。
• 由于antd的popover套别人的库，别人的又套别人的，别人的再套别人的，所以我懒得翻了，直接自己写一个。

初步实现

• 首先，我对popover粗略进行实现，主要就是一个弹窗定位问题，然后我照我预想实现后发现，一样会出现闪跳，但只有第一次会闪跳，后面比较正常：

• 可以看见，第一次显示会在左边，后续显示位置都ok。
• 所以思路就是让其在第一次显示时进行处理，顺便实现动画效果，不至于出现那么突兀。
• 由于我想做一个除react外零依赖的，所以就不考虑react-transition-group或者styledcomponent，直接进行手撸动画。

实现思路

• 其中第一次漂移问题直接使用动画解决，将opacity置为0即可。

@keyframes yhmodalopenanimate{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes yhmodalcloseanimate{
    0%{
        opacity:1;
    }

    100%{
        opacity: 0;
    }
}

.yhmodalopen{
    animation: yhmodalopenanimate 0.15s ease-in;
}

.yhmodalclose{
    animation: yhmodalcloseanimate 0.15s ease-in;
}

• 在实现过程中发现，如果元素（也就是包裹的元素加上弹窗的元素）形变或者有那种改变外形的动画，会导致定位不正确，我进行计算位置时需要拿到2者的dom的。
• 另外，需要暴露出强制刷新方法，在某些情况下需要刷新函数，比如监听windows的resize事件，这样位置变化后，再点击，就不会出现到原来的位置了。

	useEffect(() => {
		if (callback) {
			callback(() => forceRender((v) => v + 1));
		}
	}, [callback]);

	useEffect(() => {
		const handler = () => {
			forceRender((prev) => prev + 1);
		};
		window.addEventListener("resize", handler);
		return () => {
			window.removeEventListener("resize", handler);
		};
	}, [forceRender]);

• 还有个监听事件的问题，这里我暴露参数，让用户判断是否需要点击Modal外进行关闭。
• 剩下的都是体力活，算位置即可：

export type PopDirections =
	| "TL"
	| "TOP"
	| "TR"
	| "LT"
	| "LEFT"
	| "LB"
	| "BL"
	| "BOTTOM"
	| "BR"
	| "RT"
	| "RIGHT"
	| "RB";

export function switchPosition(
	sign: PopDirections,
	modalrect: DOMRect,
	popconfirmrect: DOMRect,
	scroll: number
): CSSProperties {
	let triangle = 8;
	switch (sign) {
		case "TL":
			return {
				top: popconfirmrect.top + scroll - modalrect.height - triangle,
				left: popconfirmrect.left,
			};
		case "TOP":
		....
		case "TR":
		....
.........
	}
}

效果

• 可以看看我的popover最终在h5-dooring里的效果，这个用antd的popover就不行。

• 发一下我做的这个popover地址：https://www.npmjs.com/package/yh-react-popover与预览地址：https://yehuozhili.github.io/yh-react-popover

• 直接进行安装即可使用：

npm i yh-react-popover

• 右下角的添加按钮还需要绑定右边的监听scroll进行强刷，否则右边进行滚动后，popover不会随着滚动移动。可以参考h5dooring中的实现。