托拽改变宽度,vue

1.template部分

 `${currentWidth}%`//左边组件宽度
<div class="lineDrag" @mousedown="handleMouseDown" />//拖拽线
:style="{width:`${100 - currentWidth}%`}" style="user-select:none;"//右边组件宽度

2.script部分

const currentWidth =ref<number|strintg>(75.7)//初始宽度
const startX = ref(0)//初始屏幕宽度
const IntWidth =ref<number|strintg>(75.7)//初始宽度
const isAbleChange =ref(false)
const screenWidth =ref(window.innerWidth)//当前屏幕宽度

const handleMouseDown=(e)=>{
  console.log('e',e);
  isAbleChange.value=true
  startX.value=e.clientX
  IntWidth.value=currentWidth.value
  console.log('currentWidth',currentWidth.value);
  console.log('startX',startX.value);
  console.log('IntWidth',IntWidth.value);
  document.addEventListener('mousemove',handleMouseMove)
  document.addEventListener('mouseup',handleMouseUp)
 
}
const handleMouseUp=(e)=>{
  console.log('e',e);
  isAbleChange.value=false
  document.removeEventListener('mousemove',handleMouseMove)
  document.removeEventListener('mouseup',handleMouseUp)
}
const handleMouseMove=(e)=>{
  if(!isAbleChange.value)return
  console.log('e',e);
  let moveX=e.clientX-startX.value
  currentWidth.value=IntWidth.value+((moveX/screenWidth.value) * 100)//movex是移动的距离,设置成百分比距离
  console.log('currentWidth',currentWidth.value);
  console.log('startX',startX.value);
  console.log('IntWidth',IntWidth.value);


}
onBeforeUnmount(()=>{
  document.removeEventListener('mousemove',handleMouseMove)
  document.removeEventListener('mouseup',handleMouseUp)
})