antdesign 可伸缩 拖动 drwaer

const changeWidth = () => {
        let d = document.getElementById('drag')
        if (d) {
            let child = document.getElementById('drawer').getElementsByTagName("div")[1]
            sessionStorage.setItem('drawerWidth', child.style.width)
            d.onmousedown = function (e) {
                let startX = e.clientX;
                document.onmousemove = function (e) {
                    let endX = e.clientX;
                    let dragLen = startX - endX + parseInt(sessionStorage.getItem('drawerWidth'))
                    if (dragLen < 500) dragLen = 500
                    if (dragLen > 1600) dragLen = 1600

                    child.style.width = dragLen + 'px'
                }
                document.onmouseup = function () {
                    sessionStorage.setItem('drawerWidth', child.style.width) // 不缓存的话，下一次拖动的时候会恢复原始值height=300，有闪现的现象
                    document.onmousemove = null;
                    document.onmouseup = null;
                    d.releaseCapture && d.releaseCapture();
                };
            };
            d.releaseCapture && d.releaseCapture();
        }

    }


  <Drawer
                title="服务详情"
                placement="right"
                width={1000}
                id="drawer"
                closable={false}
                onClose={() => setCheckModalVisible(false)}
                visible={checkModalVisible}

            >
                <div id="drag" style={{ cursor: 'e-resize', position: 'absolute', left: 0, top: '50%', width: '8px', height: '30px', background: '#1890ff' }} ></div>
// 你的代码
</Drawer>