Commit 49d5daeb authored by zhangwenshuai's avatar zhangwenshuai

fix mouseleave bug

parent 95873264
...@@ -27,23 +27,11 @@ const DragFixed = (props: any) => { ...@@ -27,23 +27,11 @@ const DragFixed = (props: any) => {
handle.style.top = `${e.clientY}px`; handle.style.top = `${e.clientY}px`;
}; };
const onMouseLeaveWrap = (e: any) => { const onMouseLeaveWrap = () => {
const originLeft = container.getBoundingClientRect().x || 0; // 滑块wrap移除hovered样式
// 当前固定列宽度为分割线的left handleWrap.classList.remove(styles.hovered);
const handleWrapLeft: string = handleWrap.style.left; // 滑块隐藏
// 样式转数值 handle.style.opacity = 0;
const handleWrapLeftNum: string = handleWrapLeft.slice(0, -2);
console.log('x',e.clientX - originLeft)
console.log('left',handleWrapLeftNum)
if (
e.clientX - originLeft < Number(handleWrapLeftNum) - 10 ||
e.clientX - originLeft > Number(handleWrapLeftNum) + 12
) {
// 滑块wrap移除hovered样式
handleWrap.classList.remove(styles.hovered);
// 滑块隐藏
handle.style.opacity = 0;
}
}; };
const onResizeStartHandle = (e: any) => { const onResizeStartHandle = (e: any) => {
...@@ -86,6 +74,11 @@ const DragFixed = (props: any) => { ...@@ -86,6 +74,11 @@ const DragFixed = (props: any) => {
divider.style.left = `${leftHandleLeft}px`; divider.style.left = `${leftHandleLeft}px`;
// 拖动线取鼠标位置 // 拖动线取鼠标位置
handleWrap.style.left = `${inTableLeft}px`; handleWrap.style.left = `${inTableLeft}px`;
// 滑动过程中滑块始终显示
// 滑块wrap添加hovered样式
handleWrap.classList.add(styles.hovered);
// 滑块初始化位置,显示
handle.style.opacity = 1;
}; };
const onResizeStopHandle = () => { const onResizeStopHandle = () => {
...@@ -139,7 +132,7 @@ const DragFixed = (props: any) => { ...@@ -139,7 +132,7 @@ const DragFixed = (props: any) => {
}} }}
onMouseEnter={onMouseEnterWrap} onMouseEnter={onMouseEnterWrap}
onMouseMove={onMouseMoveWrap} onMouseMove={onMouseMoveWrap}
// onMouseLeave={onMouseLeaveWrap} onMouseLeave={onMouseLeaveWrap}
> >
<ResizableBox <ResizableBox
handle={ handle={
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment