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
相关推荐
happymaker06265 分钟前
vue中对list的函数处理方式总结,以及常见功能的实现方法
javascript·vue.js·list
还是大剑师兰特6 分钟前
vueup/vue-quill 详细介绍(Vue3 富文本编辑器)
javascript·vue.js·ecmascript
蜡台27 分钟前
Uniapp H5Builderx 预览Html 显示404问题解决
前端·uni-app
threelab31 分钟前
引擎案例分析 02|GeoLayer 大厂地理可视化方案深度拆解
javascript·3d·webgl
We་ct33 分钟前
LeetCode 190. 颠倒二进制位:两种解法详解
前端·算法·leetcode·typescript
踩着两条虫43 分钟前
AI驱动的Vue3应用开发平台深入探究(二十五):API与参考之Renderer API 参考
前端·javascript·vue.js·人工智能·低代码·前端框架·ai编程
信创DevOps先锋1 小时前
本土化突围:Gitee如何重新定义企业级项目管理工具价值
前端·gitee·jquery
圣光SG1 小时前
Java类与对象及面向对象基础核心详细笔记
java·前端·数据库
Jinuss1 小时前
源码分析之React中的useImperativeHandle
开发语言·前端·javascript