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(){},

      }

巴特西

mouseMove模拟拖拽，封装指令

最新文章

热门文章