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
相关推荐
a濯3 小时前
element plus el-table多选框跨页多选保留
javascript·vue.js
蓝婷儿3 小时前
前端面试每日三题 - Day 32
前端·面试·职场和发展
星空寻流年4 小时前
CSS3(BFC)
前端·microsoft·css3
九月TTS4 小时前
开源分享:TTS-Web-Vue系列:Vue3实现固定顶部与吸顶模式组件
前端·vue.js·开源
H309195 小时前
vue3+dhtmlx-gantt实现甘特图展示
android·javascript·甘特图
CodeCraft Studio5 小时前
数据透视表控件DHTMLX Pivot v2.1发布,新增HTML 模板、增强样式等多个功能
前端·javascript·ui·甘特图
一把年纪学编程5 小时前
【牛马技巧】word统计每一段的字数接近“字数统计”
前端·数据库·word
llc的足迹5 小时前
el-menu 折叠后小箭头不会消失
前端·javascript·vue.js
九月TTS6 小时前
TTS-Web-Vue系列:移动端侧边栏与响应式布局深度优化
前端·javascript·vue.js
Johnstons6 小时前
AnaTraf:深度解析网络性能分析(NPM)
前端·网络·安全·web安全·npm·网络流量监控·网络流量分析