100201组件拆分_编辑器-react-仿低代码平台项目

文章目录

    • [1 设计UI,组件拆分](#1 设计UI,组件拆分)
    • [2 实现](#2 实现)
    • 关于

1 设计UI,组件拆分

编辑器整体如上图所示,重点关注

  • flex弹性布局
  • 画布居中
  • 画布Y轴滚动

2 实现

src/pages/question/Edit/index.tsx代码如下:

ts 复制代码
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代码如下:

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官网](https://reactjs.org/)\[CP/OL\]. \[2\][Redux官网](https://redux.js.org/)\[CP/OL\].

相关推荐
胡八一5 分钟前
使用qianjkun uniapp 主应用 集成 vue微应用
前端·vue.js·uni-app
是罐装可乐26 分钟前
前端架构知识体系:css架构模式和代码规范
前端·css·代码规范·tailwind·bem·css原子化
闲不住的李先森30 分钟前
AI 基础调用实现:从原理到代码实现
前端·llm·全栈
轻语呢喃30 分钟前
async/await:从语法糖到并发优化的异步编程
前端·面试
南雨北斗32 分钟前
Vue 3 中computed的优势
前端
202634 分钟前
15.1 JSON schema- 创建基础样例
前端·javascript
ze_juejin34 分钟前
Linux查看日志常用命令总结
前端
奔赴_向往35 分钟前
Vue 中的 inheritAttrs 属性:深入理解与实战应用
前端
blueblood38 分钟前
在 Ant Design Vue 2 中隐藏 a-modal 右下角自带的确定按钮
前端·vue.js
zayyo1 小时前
深入理解 JavaScript 中的 new:工作原理、边界与最佳实践
前端