Vue3 把下面这段代码打包成一个函数,或一个类.应该怎么做,

目的,把下面这段代码打包成一个函数,或一个类.应该怎么做?

// 菜单拖动控制代码
let initMeunLeft = 0; // 菜单初始位置
let initMenuTop = 0;
let menuDOM: HTMLDivElement; // 整个菜单
let menuBar: HTMLDivElement  // 菜单上面的 div,点击拖动
let initPointX = 0, initPointY = 0

const mouseDown = _.debounce((event: MouseEvent) => { // 这个函数绑定到 菜单上部,用于移动菜单
  console.log('1', event)
  initPointX = event.clientX // 鼠标点下的位置
  initPointY = event.clientY
  menuBar = event.target as HTMLDivElement
  menuDOM = menuBar.parentElement as HTMLDivElement
  initMeunLeft = menuDOM.offsetLeft
  initMenuTop = menuDOM.offsetTop
  console.log(initMeunLeft, initMenuTop)
  document.addEventListener('mousemove', mouseMove)
  document.addEventListener('mouseup', mouseUp)
}, 300, { leading: true, trailing: false })

const mouseMove = _.throttle((event: MouseEvent) => {
  const moveWidth = event.clientX - initPointX // 移动的距离
  const moveHeight = event.clientY - initPointY // 
  menuDOM.style.left = initMeunLeft + moveWidth + 'px' // 更新菜单的位置
  menuDOM.style.top = initMenuTop + moveHeight + 'px'
  // console.log('2', menuDOM)
}, 10, { leading: true, trailing: false })


function mouseUp() { 
  // console.log('menu关闭监听,鼠标移动')
  document.removeEventListener('mousemove', mouseMove)
  document.removeEventListener('mouseup', mouseUp)
}

function closeMenu(event: any) {
  const currMeun = document.getElementById('curr-meun') as HTMLDivElement
  if (currMeun && !currMeun.contains(event.target) || !currMeun) {
    // console.log('menu关闭监听,鼠标点击')
    emit('update:visible', false)
    document.removeEventListener('click', closeMenu)
  }
}
// 这个watch 怎么打包进去
watch(() => props.visible, () => {
  if (props.visible) {
    _.debounce(() => {
      // console.log('menu开始监听,鼠标点击')
      document.addEventListener('click', closeMenu)
    }, 300, { leading: false, trailing: true })()
  }
})
// 下面这个 一直执行监听, 当菜单不显示了,这里其实就不用执行,
document.oncontextmenu = function (e) {
  closeMenu(e)
}

你要怎么打包? 这段代码不完整吧

到一个函数是不行的，封装成一个组件可以全部包含这些

封装成一个组件可以啊

用mixin

既然是vue3 就封装成hooks吧