React 最佳實踐：可拖拽側邊欄

這是我參與8月更文挑戰的第5天，活動詳情查看：8月更文挑戰css

前言

頁面佈局也是在實際開發中常常用到的技術。react

在大的方面，能夠實現整個頁面的佈局，好比左側導航、header、footer...
在小的方面，能夠是內容佈局，好比文章。
考慮佈局時，須要兼顧桌面瀏覽器和移動端的狀況，也就是常說的 responsive。

在 react 中實現，和經典實現其實沒什麼大的區別。瀏覽器

實現佈局有這幾種方式：markdown

從 0 開始使用 CSS 實現，這是必須掌握的技能
使用 CSS Grid 系統（網狀頁面），能夠使用不一樣尺寸的屏幕
使用組件庫，例如 antd
- Grid：24 柵格系統
- Layout：頁面級總體佈局

CSS 實現基礎佈局

上中下佈局

.app-layout1 {
  width: 500px;
  height: 400px;
  position: relative;
  text-align: center;
}

.app-layout1 .header {
  line-height: 60px;
}
.app-layout1 .content {
  position: absolute;
  bottom: 60px;
  top: 60px;
  left: 0;
  right: 0;
}
.app-layout1 .footer {
  line-height: 60px;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
}
複製代碼

Sider + 上中下佈局

使用 left: 150px，留出 Sider 的位置antd

.app-layout2 {
  width: 500px;
  height: 400px;
  position: relative;
  text-align: center;
}
.app-layout2 .header {
  position: absolute;
  left: 150px;
  top: 0;
  right: 0;
}
.app-layout2 .content {
  position: absolute;
  bottom: 60px;
  top: 60px;
  left: 150px;
  right: 0;
}
.app-layout2 .footer {
  bottom: 0;
  left: 150px;
  right: 0;
  position: absolute;
}
.app-layout2 .sider {
  width: 150px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}
複製代碼

進階：側邊欄寬度可拖拽

樣式佈局

style.css

.layout {
  position: relative;
  width: 100%;
  height: 400px;
}
.sider {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #ddd;
}
.header {
  background-color: #aaa;
  height: 60px;
}
複製代碼

index.js

經過狀態 siderWidth 控制 layout 的 paddingLeftapp

import { useState } from 'react';
import './style.css';

export default function ResizeLayout() {
  const [siderWidth, setSiderWidth] = useState(150);
  const pxWidth = `${siderWidth}px`;

  return (
    <div className="layout" style={{ paddingLeft: pxWidth }}> <div className="sider" style={{ width: pxWidth }}> sider </div> <div className="header">header</div> <div className="content">content</div> </div>
  );
}
複製代碼

拖放邏輯

視覺上，咱們拖拽的是側邊欄 Sider 的右邊框，其實並非。咱們會在右邊框位置放置一個「隱身」的 bar -- sider-resizer：ide

.sider-resizer {
  position: absolute;
  width: 6px;
  top: 0;
  bottom: 0;
  cursor: col-resize;
}
複製代碼

當鼠標在 sider-resizer 上，觸發 onMouseDown 時，記錄下鼠標的初始位置，同時標記 dragging 狀態爲 true：佈局

const handleMouseDown = (event) => {
  setStartPageX(event.pageX);
  setDragging(true);
};
複製代碼

伴隨着 dragging 狀態的改變，咱們會爲頁面鋪上一層遮罩 -- resize-mask，以便後續事件的監聽：post

{
  dragging && (
    <div className="resize-mask" onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} />
  );
}
複製代碼

.resize-mask {
  background: rgba(0, 0, 0, 0);
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  cursor: col-resize;
}
複製代碼

onMouseMove 的過程當中，實時更新 siderWidth 以及對 startPageX 的更新，就會產生拖拽的效果。ui

最終在 onMouseUp 時，結束拖拽狀態。

const handleMouseMove = (event) => {
  const currentSiderWidth = siderWidth + event.pageX - startPageX;
  setSiderWidth(currentSiderWidth);
  setStartPageX(event.pageX);
};
const handleMouseUp = () => {
  setDragging(false);
};
複製代碼

localStorage 存儲寬度位置

在拖拽結束時，保存 siderWidth 到 localStorage；初始化 siderWidth 時，檢查 localStorage 是否有值。

const [siderWidth, setSiderWidth] = useState(
  parseInt(localStorage.getItem('siderWidth')) || 150,
);
const handleMouseUp = () => {
  setDragging(false);
  localStorage.setItem('siderWidth', siderWidth);
};
複製代碼

完整代碼

style.css

.layout {
  position: relative;
  width: 100%;
  height: 400px;
}
.sider {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #ddd;
}
.header {
  background-color: #aaa;
  height: 60px;
}
.sider-resizer {
  position: absolute;
  width: 6px;
  top: 0;
  bottom: 0;
  cursor: col-resize;
}
.resize-mask {
  background: rgba(0, 0, 0, 0);
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  cursor: col-resize;
}
複製代碼

index.js

import { useState } from 'react';
import './style.css';

export default function ResizeLayout() {
  const [siderWidth, setSiderWidth] = useState(
    parseInt(localStorage.getItem('siderWidth')) || 150,
  );
  const [dragging, setDragging] = useState(false);
  const [startPageX, setStartPageX] = useState(0);
  const pxWidth = `${siderWidth}px`;
  const handleMouseDown = (event) => {
    setStartPageX(event.pageX);
    setDragging(true);
  };
  const handleMouseMove = (event) => {
    const currentSiderWidth = siderWidth + event.pageX - startPageX;
    setSiderWidth(currentSiderWidth);
    setStartPageX(event.pageX);
  };
  const handleMouseUp = () => {
    setDragging(false);
    localStorage.setItem('siderWidth', siderWidth);
  };
  return (
    <div className="layout" style={{ paddingLeft: pxWidth }}> <div className="sider" style={{ width: pxWidth }}> sider </div> <div className="header">header</div> <div className="content">content</div> <div className="sider-resizer" style={{ left: pxWidth }} onMouseDown={handleMouseDown} > {dragging && ( <div className="resize-mask" onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} /> )} </div> </div>
  );
}
複製代碼