React 抽屉显示和隐藏

html 复制代码

<div className={styles.content}>
      <div className={styles.left} ref={leftRef}>
      	<div className={styles.drawer} onClick={drawerChange}>
          我是抽屉开关
        </div>

        <div>
        	我是左边内容
        </div>
      </div>
      <div className={styles.right} ref={rightRef}>
        我是右边
      </div>
</div>

css 复制代码

// less文件语法
.content {
    position: relative;
    display: flex;
    height: 100%;
}

.drawer {
    position: absolute;
    top: 50%;
    right: -24px;
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 999;
}

.left {
    height: 100%;
    position: absolute;
    left: 0;
    transition: left 0.3s ease;
    width: 312px;
}

.right {
    flex: 1;
    padding-left: 312px;
    transition: padding-left 0.3s ease;
}

javascript 复制代码

const [isOpen, setIsOpen] = useState<boolean>(true)
const leftRef = useRef<any>();
const rightRef = useRef<any>();

const drawerChange = () => {
    setIsOpen(!isOpen)
    const leftDom= leftRef?.current as any;
    const rightDom = rightRef?.current as any;

    leftDom.style.left = isOpen ? "-312px" : "0";
    rightDom.style.paddingLeft = isOpen ? "0" : "312px";
    rightDom.style.width = isOpen ? "100%" : 'calc(100% - 312px)';
}