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
相关推荐
UXbot3 小时前
AI应用原型平台核心能力:界面自动生成、交互流程编辑、多格式代码导出详解
前端·低代码·交互·软件构建·原型模式·web app
call me by ur name3 小时前
多模态大模型轻量化
前端·网络·人工智能
Lee川3 小时前
登录注册模块的 JWT 认证机制详解
前端·后端·react.js
夜猫子ing3 小时前
《嵌入式 Linux 控制服务从零搭建(二):从目录结构到 CMakeLists,搭一个像样的 C++ 工程骨架》
java·前端·c++
kyriewen11 小时前
百度用6%成本碾压硅谷?中国AI把性价比玩明白了
前端·百度·ai编程
kyriewen12 小时前
你还在手动敲命令部署?GitHub Actions 让你 push 即上线,摸鱼时间翻倍
前端·面试·github
Csvn13 小时前
Pinia 状态管理
前端
不减20斤不改头像13 小时前
手机一句话开发贪吃蛇!TRAE SOLO 移动端 AI 编程实测
前端·后端
xuankuxiaoyao14 小时前
Vue.js实践-组件基础下
前端·javascript·vue.js
小白学大数据14 小时前
JS 混淆加密下的 Python 爬虫解决方案
javascript·爬虫·python