diff --git a/src/components/Common/forecastRect/index.jsx b/src/components/Common/forecastRect/index.jsx index ad4e2f2..1a27843 100644 --- a/src/components/Common/forecastRect/index.jsx +++ b/src/components/Common/forecastRect/index.jsx @@ -1,7 +1,7 @@ /* * @Author: zhp * @Date: 2024-08-29 09:46:11 - * @LastEditTime: 2024-09-13 14:35:10 + * @LastEditTime: 2024-09-13 16:27:51 * @LastEditors: zhp * @Description: */ @@ -25,15 +25,24 @@ function BlueRect(props) { // 在这里可以根据isVisible的变化执行其他逻辑 }; // const parentRef = useRef(null); - // const pointsRef = useRef(null); + // const pointsRef = useRef(null); + const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); + const [pointsPosition, setPointsPosition] = useState({ left: 'initial', top: 'initial' }); + + const handleMouseMove = (event) => { + setMousePosition({ x: event.clientX, y: event.clientY }); + }; + const handleToggleVisibility = () => { setIsVisible(!isVisible); if (isVisible) { - console.log(props) // 当隐藏时,可以清理一些数据 setChartData(null); } else { - console.log('props',props) + setPointsPosition({ + left: `${mousePosition.x + 100}px`, + top: `${mousePosition.y - 100}px`, + }); // 当显示时,可以模拟获取数据并传递给子组件 setChartData({ title, @@ -42,15 +51,8 @@ function BlueRect(props) { }); } } - // useEffect(() => { - // if (parentRef.current && pointsRef.current &&!props.blue && isVisible) { - // const parentRect = parentRef.current.getBoundingClientRect(); - // pointsRef.current.style.left = `${parentRect.right}px`; - // pointsRef.current.style.top = `${parentRect.top}px`; - // } - // }, [props.blue, isVisible]); return ( -