问题在于当鼠标在Splitter拖拽过程中快速移动到iframe上时,浏览器会将鼠标事件传递给iframe,导致拖拽行为中断。
解决方案是在拖拽期间为iframe添加遮罩层,阻止鼠标事件传递到iframe。
const [isResizing, setIsResizing] = useState(false);
// 处理拖拽开始
const handleResizeStart = () => {
setIsResizing(true);
};
// 处理拖拽结束
const handleResizeEnd = () => {
setIsResizing(false);
};
return (
<Splitter>
<Splitter.Panel defaultSize="40%" min="20%" max="70%" stypes={{position: 'relarive'}}>
<ifrmae>...</iframe>
{isResizing && <div styles={{postion: 'absolute',top: 0, left: 0, width: '100%', height:'100%'}}></div>}
</Splitter.Panel>
<Splitter.Panel>
<Desc text="Second" />
</Splitter.Panel>
</Splitter>
);