Browse Source

解决bug:程序刚启动时,屏幕变成中等大小后,抽屉按钮显示不出来

dengdx 2 months ago
parent
commit
826a3778d9
1 changed files with 13 additions and 6 deletions
  1. 13 6
      src/layouts/NavbarFloat.tsx

+ 13 - 6
src/layouts/NavbarFloat.tsx

@@ -20,10 +20,15 @@ const NavbarFloat: React.FC<NavbarFloatProps> = ({
   className,
   className,
 }) => {
 }) => {
   const [open, setOpen] = useState(false);
   const [open, setOpen] = useState(false);
-  const [btnPos, setBtnPos] = useState({
-    x: window.innerWidth - 96,
-    y: window.innerHeight - 96,
-  });
+  const [btnPos, setBtnPos] = useState({ x: 100, y: 100 });
+
+  React.useEffect(() => {
+    // 组件挂载后再安全访问 window
+    setBtnPos({
+      x: window.innerWidth - 96,
+      y: window.innerHeight - 96,
+    });
+  }, []);
   const [dragged, setDragged] = useState(false);
   const [dragged, setDragged] = useState(false);
   const dragging = useRef(false);
   const dragging = useRef(false);
   const offset = useRef({ x: 0, y: 0 });
   const offset = useRef({ x: 0, y: 0 });
@@ -99,8 +104,10 @@ const NavbarFloat: React.FC<NavbarFloatProps> = ({
         <div
         <div
           style={{
           style={{
             position: 'fixed',
             position: 'fixed',
-            left: btnPos.x,
-            top: btnPos.y,
+            left: undefined,
+            top: undefined,
+            right: window.innerWidth - btnPos.x,
+            bottom: window.innerHeight - btnPos.y,
             zIndex: 1100,
             zIndex: 1100,
             cursor: 'grab',
             cursor: 'grab',
           }}
           }}