antd Drawer 实现宽度拖拽

ts 复制代码
import react from 'react '
const App = () => {
  const onmousedown = () => {
    let isDown = false
    isDown = true
    window.onmouseup = () => {
      isDown = false

      window.onmousemove = null
    }
    window.onmousemove = (e: any) => {
      if (isDown === false) {
        return
      }
      ;(document && document.getElementById('line')?.style?.left) ?? '0px'

      const d: any = document.getElementsByClassName('ant-drawer-content-wrapper')[0]
      const handle = document.body.clientWidth - e.clientX
      if (handle > document.body.clientWidth) {
        d.style.width = document.body.clientWidth + 'px'
        return
      }
      d.style.width = handle + 'px'
    }
  }
  return (
    <Drawer title="查看详情" open={open} placement="right" onClose={onClose} width="800px">
      <div id="line" onMouseDown={onmousedown} className="line"></div>
      <UserMenu />
    </Drawer>
  )
}

export default APP
相关推荐
程序员海军22 分钟前
尤雨溪 : Vue 4 已经在规划中了!
前端·javascript·vue.js
2601_9499706934 分钟前
HumanizeDuration 跨端三方库仓颉适配全流程
前端·javascript·flutter
风骏时光牛马2 小时前
后端服务接口开发与性能优化
前端
kyriewen2 小时前
我让 4 个 AI 互相 review 代码,最温柔的那个下手最狠
前端·程序员·ai编程
计算机魔术师3 小时前
493家公司白砸AI钱?Apollo这组数据戳破了幻觉
前端
IT_陈寒3 小时前
Java静态变量初始化坑得我头皮发麻
前端·人工智能·后端
天外飞雨道沧桑3 小时前
我在浏览器里练了一个 792 参数的大模型,它学会了补全 JavaScript
开发语言·javascript·ai·ecmascript·ai编程
柳杉3 小时前
用 Codex 完成智慧高速 3D 可视化大屏,从 18 张行业设计稿到可交互的运行监测中心
前端·ai编程·数据可视化
review445433 小时前
拿到 codex 第一步
前端·agent·vibecoding
鶴哥只手遮天4 小时前
jQuery 4.0 源码架构与工程实践-第 01 章 · 全景与工程结构:一个 20 岁库的自省
前端·javascript·jquery