diff --git a/components/apolloTable/component/DragFixed.tsx b/components/apolloTable/component/DragFixed.tsx index 3d941be2045d2909475e4a013dc59cadf96db296..6776f0ae1990236728ca6c267ce0053c81221c33 100644 --- a/components/apolloTable/component/DragFixed.tsx +++ b/components/apolloTable/component/DragFixed.tsx @@ -27,23 +27,11 @@ const DragFixed = (props: any) => { handle.style.top = `${e.clientY}px`; }; - const onMouseLeaveWrap = (e: any) => { - const originLeft = container.getBoundingClientRect().x || 0; - // 当前固定列宽度为分割线的left - const handleWrapLeft: string = handleWrap.style.left; - // 样式转数值 - 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 onMouseLeaveWrap = () => { + // 滑块wrap移除hovered样式 + handleWrap.classList.remove(styles.hovered); + // 滑块隐藏 + handle.style.opacity = 0; }; const onResizeStartHandle = (e: any) => { @@ -86,6 +74,11 @@ const DragFixed = (props: any) => { divider.style.left = `${leftHandleLeft}px`; // 拖动线取鼠标位置 handleWrap.style.left = `${inTableLeft}px`; + // 滑动过程中滑块始终显示 + // 滑块wrap添加hovered样式 + handleWrap.classList.add(styles.hovered); + // 滑块初始化位置,显示 + handle.style.opacity = 1; }; const onResizeStopHandle = () => { @@ -139,7 +132,7 @@ const DragFixed = (props: any) => { }} onMouseEnter={onMouseEnterWrap} onMouseMove={onMouseMoveWrap} - // onMouseLeave={onMouseLeaveWrap} + onMouseLeave={onMouseLeaveWrap} >