实现鼠标长按某一区域可上下改变盒子高度大小

本文链接：https://blog.csdn.net/weixin_50236973/article/details/139122170

组件

import {ResizeSensor} from 'css-element-queries';

function ContainerFoot(props) {
    const {isCover, onPosition} = props;
    const [max, setMax] = useState(600);
    const {position, separatorProps} = useResizable({axis: 'y', initial: 312, min: 208, max, reverse: true});

    useEffect(() => {
        const el = document.querySelector(`.${style.container}`);
        const resizeSensor = new ResizeSensor(el, size => {
            setMax(size.height - 240);
        });
        return () => resizeSensor?.detach();
    }, []);

    useEffect(() => {
        // onPosition(position);
    }, [position]);

    return (
        <div className={style.container_foot} style={
  
  {height: position}}>
            <div className={style.container_foot_separator} {...separatorProps}></div>
            {isCover ? <ContainerFootDisableCover /> : <ContainerFootContent />}
        </div>
    );
}

样式

.container_foot_separator {
    width: 100%;
    height: 4px;
    background: #191924;
    cursor: row-resize;
}


.container_foot {
    flex: none;
    background: #2b2e3e;
    height: 312px;
    // margin-top: 4px;
    position: relative;
}

import {useCallback, useRef, useState} from 'react';

const KEYS_LEFT = ['ArrowLeft', 'Left'];
const KEYS_RIGHT = ['ArrowRight', 'Right'];
const KEYS_UP = ['ArrowUp', 'Up'];
const KEYS_DOWN = ['ArrowDown', 'Down'];
const KEYS_AXIS_X = [...KEYS_LEFT, ...KEYS_RIGHT];
const KEYS_AXIS_Y = [...KEYS_UP, ...KEYS_DOWN];
const KEYS_POSITIVE = [...KEYS_RIGHT, ...KEYS_DOWN];

const useResiz