Vue 自定义指令元素拖动

时间:2022-05-23 漠里人气:0

昨天在做的一个功能时，同时弹出多个框展示多个表格数据。

这些弹出框可以自由拖动。单独的拖动好实现，给元素绑定 mousedowm 事件。

这里就想到了 Vue 里面自定义指令来实现。

一、自定义指令

在使用自定义指令之前，先对自定义指令有一定的了解。从以下几个方面着手：

1、自定义指令定义范围

全局注册和组件内注册（注册的范围根据实际业务需求来）

// 注册一个全局指令，可以在任何组件使用
Vue.directive('focus',{
    // 当被绑定的元素插入 DOM 时
    inserted: function(el){
        // 聚焦元素
        el.focus()
    }
})

// 在组件内注册，只能当前组件使用
directives:{
    focus:{
        inserted: function(el){
            el.focus()
        }
    }
}

// 使用
<input v-focus>

2、钩子函数

对于一个指令有下面一些钩子函数可以选择：

bind：只调用一次，指令第一次绑定到元素时调用
inserted：被绑定元素插入父节点时调用
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前
componentUpdated：指令所在的 VNode 及其子 VNode 全部更新后调用
unbind：只调用一次，指令与元素解绑时调用

3、函数参数

指令钩子函数会被传入以下参数：

el：指令所绑定的元素，可以用来直接操作 DOM
binding：一个对象，包含以下 property：

name：指令名

value：指令绑定的值

oldValue：指令绑定的前一个值

expression：字符串形式的指令表达式

arg：传给指令的参数

modifiers：一个包含修饰符的对象

vnode：Vue 编译生成的虚拟节点
oldVnode：上一个虚拟节点

二、拖动实现

拖动的实现：给目标 Element 注册 mousedown 事件，在这个事件里面再对 document 的 mousemove 和 mouseup 注册。

代码如下：

directives: {
    drag: {
      // 拖动标题栏，让父元素改变位置，这里所以选择 inserte的
      inserted: (el) => {
        const target = el.parentElement
        el.onmousedown = (e) => {
          const disX = e.pageX - target.offsetLeft
          const disY = e.pageY - target.offsetTop
          document.onmousemove = (de) => {
            target.style.left = de.pageX - disX + 'px'
            target.style.top = de.pageY - disY + 'px'
          }
          document.onmouseup = (de) => {
            document.onmousemove = document.onmouseup = null
          }
        }
      }
    }
  }

在需要的 Element 上面使用 v-drag 即可。

加载全部内容