<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>

// 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;
}

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)';
}