Antd Splitter 遇到iframe拖拽异常

65 阅读1分钟

问题在于当鼠标在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>
);