我通过 https://github.com/johnwalley/allotment制作了一个可拖动的分割面板。
在面板面板中,我有一个摩纳哥编辑器。当我将鼠标悬停在摩纳哥编辑器上时,会出现一个诊断窗口。目前,即使
.monaco-hover { z-index: 1000 !important }
中有 style.css
,诊断窗口也不会超过第一个面板。有谁知道如何使诊断窗口超过第一个面板?
CodeSandbox:https://codesandbox.io/s/reset-forked-7wvrbj?file=/src/App.js
import React from "react";
import { Allotment } from "allotment";
import "allotment/dist/style.css";
import "./style.css";
import Editor, { monaco } from "@monaco-editor/react";
monaco
.init()
.then((monaco) => {
monaco.languages.registerHoverProvider("html", {
provideHover: function (model, position) {
console.log(position);
return {
range: new monaco.Range(
1,
1,
model.getLineCount(),
model.getLineMaxColumn(model.getLineCount())
),
contents: [
{ value: "**SOURCE**" },
{ value: "hey man, how are you?" }
]
};
}
});
})
.catch((error) =>
console.error("An error occurred during initialization of Monaco: ", error)
);
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
toExpand: true
};
this.myRef = React.createRef();
}
handleChange = (sizes) => {
if (sizes.length > 1) {
if (sizes[1] < 31) {
this.setState({ toExpand: true });
} else {
this.setState({ toExpand: false });
}
}
};
render() {
return (
<div
style={{
minWidth: 200,
height: "100vh",
overflowX: "auto",
width: "auto",
margin: "0px 0px 0px 0px"
}}
>
<Allotment
vertical
onChange={this.handleChangeAllotment}
ref={this.myRef}
>
<Allotment.Pane>
<Editor
height="30vh"
language="html"
value={`
<section>
<div>
<span>
{{ some_value }}
</span>
</div>
</section>
`}
options={{
selectOnLineNumber: true,
lineNumbersMinChars: 0,
glyphMargin: true,
readOnly: true,
hover: {
enabled: true
}
}}
/>
</Allotment.Pane>
<Allotment.Pane preferredSize="0%" minSize={20}>
short <br /> short <br />
short <br /> short <br />
short <br /> short <br />
short <br /> short <br />
short <br /> short <br />
short <br /> short <br />
</Allotment.Pane>
</Allotment>
</div>
);
}
}
我不确定你所说的诊断窗口是什么意思,但我假设它是显示“嘿伙计,你好吗?”的框当代码悬停时,我也会假设您希望该框显示在面板上,其中有“短”文本。如果这就是你想要的,那么它没有显示在另一个面板上的原因似乎是因为父窗口有overflow: hidden
,你需要做的就是将面板overflow
更改为
visible
。为此,您可以使用此 CSS:
...
div[data-testid="split-view-view"][data-testid="split-view-view"][data-testid="split-view-view"] {
overflow: visible;
}
div[data-testid="split-view-view"][data-testid="split-view-view"][data-testid="split-view-view"]:nth-child(2) {
background: white;
}
...
为什么我重复[data-testid="split-view-view"]
这么多次?这是为了增加规则的特异性(或者,您可以将 !important
添加到
overflow: visible
中,而不重复
[data-testid="split-view-view"]
)。至于为什么第二个面板的背景是白色的,是因为当不隐藏溢出时,第一个面板的元素会与第二个面板重叠。这是工作代码和盒子叉子。我想通了,所以
position: fixed