Commit 49d5daeb authored by zhangwenshuai's avatar zhangwenshuai

fix mouseleave bug

parent 95873264
......@@ -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}
>
<ResizableBox
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