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
相关推荐
wearegogog1231 天前
基于 MATLAB 的卡尔曼滤波器实现,用于消除噪声并估算信号
前端·算法·matlab
Drawing stars1 天前
JAVA后端 前端 大模型应用 学习路线
java·前端·学习
品克缤1 天前
Element UI MessageBox 增加第三个按钮(DOM Hack 方案)
前端·javascript·vue.js
小二·1 天前
Python Web 开发进阶实战:性能压测与调优 —— Locust + Prometheus + Grafana 构建高并发可观测系统
前端·python·prometheus
小沐°1 天前
vue-设置不同环境的打包和运行
前端·javascript·vue.js
qq_419854051 天前
CSS动效
前端·javascript·css
烛阴1 天前
3D字体TextGeometry
前端·webgl·three.js
桜吹雪1 天前
markstream-vue实战踩坑笔记
前端
南村群童欺我老无力.1 天前
Flutter应用鸿蒙迁移实战:性能优化与渐进式迁移指南
javascript·flutter·ci/cd·华为·性能优化·typescript·harmonyos
C_心欲无痕1 天前
nginx - 实现域名跳转的几种方式
运维·前端·nginx