Popover 下拉容器定位原理浅析

不换

发布于 2024-04-30 14:12:13

680

发布于 2024-04-30 14:12:13

文章被收录于专栏：不换的随想乐园不换的随想乐园

（封面图片来自于基于 CC0 协议的 shopify ）

使用过 Antd 的小伙伴应该深有体会，但是我们用的多了，也就想了解它怎么做的（：跟我一样吧

乍一看实现方式并不难，但是其实本篇文章更想表述一些细节的内容。

目标能力

精准定位
跟随屏幕缩放实时定位
跟随滚动

构造容器

"use client";
import {FC, PropsWithChildren, RefObject, useCallback, useEffect, useRef, useState} from "react";
import { createPortal } from "react-dom";
import { cloneElement } from "react";

const getStyle = (ref: RefObject<HTMLElement>, position: 'top' | 'bottom' | 'right' | 'left') => {
    const styles = ref.current?.getBoundingClientRect();

    const top = styles!.top + styles.height + 30 + 'px';
    const left = styles!.left + 'px';

    return {
        top,
        left,
    }
}

const Popover: FC<PropsWithChildren> = ({ children }) => {

    const ref = useRef(null);
    const [styles, setStyles] = useState({});

    const [opacity, setOpacity] = useState(0);


    useEffect(() => {
        const _ = getStyle(ref)
        setStyles(_);
    }, []);

    const onMouseEnter = useCallback(() => {
        setOpacity(1)
    }, [])
    const onMouseLeave = useCallback(() => {
        setOpacity(0)
    }, [])

    const newChild = cloneElement(children as any, {
        ref,
        onMouseEnter,
        onMouseLeave
    })

    return <>
        {newChild}
        {
            createPortal(<div className="popover-wrapper bg-amber-300 w-[100px] h-[80px] absolute" style={{...styles, opacity }}>
                    Hello )_________
            </div>, document.body)
        }
    </>
}


export  default Popover;

其实大家大可关注到精髓点：

• createPortal
• getBoundingClientRect

createPortal 的目的是脱离文档流，getBoundingClientRect 是为了拿到目标元素的具体位置 坐标、宽高。

我们可以设置 Popover 的模式，大体分为两种 hover 和 click 模式：

• click
- • 监听 onClick 事件即可
• hover
- • 监听 onMouseEnter
- • 监听 onMouseLeave

到这里，你觉得结束了吗？

答案是：没有，因为我们要考虑，点击模式常驻屏幕，滚动跟随移动的场景。

在这里我们借助 ResizeObserver 来实现：

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
       const _ = getStyle(ref)
       setStyles(_);
  }
});

resizeObserver.observe(document.target || document.body);

兼容性还是可以的，但是我们依旧要考虑我们程序的鲁棒性：


async function handleWatch() {
    if(!window.ResizeObserver) {
       await  import ('resize-observer-polyfill')
    }

    const resizeObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
           const _ = getStyle(ref)
           setStyles(_);
      }
    });

    resizeObserver.observe(document.target || document.body);
}

到此，一个简单的跟随移动 Popover 就实现了，如果你有更好的想法，欢迎交流～

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2024-04-03，如有侵权请联系 cloudcommunity@tencent.com 删除

容器