|
@@ -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',
|
|
}}
|
|
}}
|