mouseMove模拟拖拽，封装指令

最近项目里常常使用拖拽改变元素位置或者大小的需求，cv法文件找的脑阔疼，索性试试写一个指令。
说起指令，提一嘴，vue3没有了根元素唯一的限制后，仿佛指令绑定在组件上就不能生效了。

import type { Directive } from 'vue'
const mouseDownMove: Directive = {
  mounted(el, binding) {
    const { mouseDown, mouseMove, mouseUp } = binding.value
    el.onmousedown = (event) => {
      mouseDown && mouseDown(event)
      document.onselectstart = function () {
        return false
      }
      document.ondragstart = function () {
        return false
      }
      document.onmousemove = (event) => {
        mouseMove && mouseMove(event)
      }
      window.onmouseup = (event) => {
        document.onmousemove = null
        document.onselectstart = null
        window.onmouseup = null
        document.ondragstart = null
        mouseUp && mouseUp(event)

      <span class="xy-scrollbar__thumb"
            :style="thumbX"
            v-mouseDownMove="handleMouseDownX"></span>
      const  mouseDownMove = {
            mouseDown(){},
            mouseMove(){},
            mouseUp(){},
      }