1 設計UI，組件拆分

編輯器整體如上圖所示，重點關注：

• flex彈性布局
  • 上
    • 左
    • 中
    • 右
  • 下
    • 左
    • 中
    • 右
• 畫布居中
• 畫布Y軸滾動

2 實現

src/pages/question/Edit/index.tsx代碼如下：

import { FC } from "react";
import useLoadQuestionData from "@/hooks/useLoadQuestionData";import styles from "./index.module.scss";const Edit: FC = () => {// 獲取問卷信息const { loading } = useLoadQuestionData();return (<div className={styles.container}><div style={{ backgroundColor: "#fff", height: "40px" }}>Header</div><div className={styles["content-wrapper"]}><div className={styles.content}><div className={styles.left}>Left</div><div className={styles.main}><div className={styles["canvas-wrapper"]}></div></div><div className={styles.right}>Right</div></div></div></div>);
};export default Edit;

src/pages/question/Edit/index.module.scss代碼如下：

.container {display: flex;flex-direction: column;height: 100vh;background-color: #f0f2f5;
}.content-wrapper {flex: auto;padding: 12px 0;
}.content {display: flex;margin: 0 24px;height: 100%;.left {width: 285px;background-color: #fff;padding: 0 12px;}.main {flex: 1;position: relative;overflow: hidden;.canvas-wrapper {position: absolute;width: 400px;height: 712px;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);overflow: auto;box-shadow: 0 2px 10px #00001f;}}.right {width: 300px;background-color: #fff;padding: 0 12px;}
}

效果如下圖所示：

關于

?QQ:806797785

??倉庫地址：https://gitee.com/gaogzhen

??倉庫地址：https://github.com/gaogzhen

[1]react官網[CP/OL].

[2]Redux官網[CP/OL].