我想实现一个类似VS Code控制台窗口的控制台窗口。
在VS Code中,当我们点击Shift+Command+Y时,会在代码窗口下方打开一个控制台窗口。有几个特点:
- 整个窗口分为两部分。代码窗口和控制台窗口都可以在右侧有滚动条。
- 控制台窗口的外观会调整代码窗口的大小。
- 有一个水平拆分器可以调整控制台窗口(和代码窗口)的大小。
我试图创建一个 codesandbox .但它没有特征 2 和特征 3。
有人能帮忙吗?
import { useState } from "react";
import { Button } from "@material-ui/core";
import "./styles.css";
export default function App() {
const [textState, setTextState] = useState("off");
const toggleText = () => {
setTextState((state) => (state === "On" ? "Off" : "On"));
};
return (
<>
<Button variant="contained" color="primary" onClick={toggleText}>
Toggle
</Button>
<div style={{ overflowY: "scroll", height: "300px", fontSize: "30px" }}>
<h1>code 1</h1>
<h1>code 2</h1>
<h1>code 3</h1>
</div>
<div>
{textState === "On" && (
<div
style={{ overflowY: "scroll", height: "200px", fontSize: "30px" }}
>
<h1>console 1</h1>
<h1>console 2</h1>
<h1>console 3</h1>
</div>
)}
</div>
</>
);
}
最佳答案
对于第二个问题,当console
View 隐藏时,您可以将code
区域高度设置为全高。
height: `${textState === "On" ? 500 - consoleAreaHeight : 500}px`
对于第 3 个问题,可以使用 ref
和鼠标移动处理程序来实现。
const consoleRef = useRef(null);
const mouseMoveHandler = (e) => {
e.preventDefault();
if (resizing) {
const delta = consoleRef.current.getBoundingClientRect().top - e.clientY;
setConsoleAreaHeight(
(prevConsoleAreaHeight) => prevConsoleAreaHeight + delta
);
}
};
代码沙箱 => https://codesandbox.io/s/react-material-togglebuttonexample-forked-dk7lu?file=/src/App.jsx
关于javascript - 制作一个像 VS Code 一样的水平控制台窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70462724/