关于Vue 自定义指令实现元素拖动的详细代码

 更新时间:2022年01月18日 11:51:48   作者:漠里  
这篇文章主要介绍了Vue 自定义指令实现元素拖动,在使用自定义指令之前,先对自定义指令有一定的了解,主要从自定义指令定义范围,钩子函数方面入手,需要的朋友可以参考下

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

这些弹出框可以自由拖动。单独的拖动好实现,给元素绑定 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 即可。

到此这篇关于Vue 自定义指令实现元素拖动的文章就介绍到这了,更多相关Vue 自定义指令元素拖动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 基于vue中解决v-for使用报红并出现警告的问题

    基于vue中解决v-for使用报红并出现警告的问题

    下面小编就为大家分享一篇基于vue中解决v-for使用报红并出现警告的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue回到顶部监听滚动事件详解

    vue回到顶部监听滚动事件详解

    这篇文章主要为大家详细介绍了vue回到顶部监听滚动事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-08-08
  • vue.js云存储实现图片上传功能

    vue.js云存储实现图片上传功能

    示对象存储是腾讯云提供的一种存储海量文件的分布式存储服务,本文主要介绍了用vue.js实现图片上传功能,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • Vue实现下拉表格组件

    Vue实现下拉表格组件

    这篇文章主要为大家详细介绍了Vue实现下拉表格组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue实现列表拖拽排序的功能

    vue实现列表拖拽排序的功能

    这篇文章主要介绍了vue实现列表拖拽排序的功能,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
    2020-11-11
  • 浅析Vue3中的逻辑复用

    浅析Vue3中的逻辑复用

    这篇文章主要为大家详细介绍了Vue3中逻辑复用的相关知识,文中的示例代码简洁易懂,对我们深入了解Vue3有一定的帮助,需要的小伙伴可以参考下
    2023-12-12
  • vue时间组件DatePicker组件的手写示例

    vue时间组件DatePicker组件的手写示例

    这篇文章主要为大家介绍了vue时间组件DatePicker组件的手写实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 详解vue-cli项目在IE浏览器打开报错解决方法

    详解vue-cli项目在IE浏览器打开报错解决方法

    这篇文章主要介绍了详解vue-cli项目在IE浏览器打开报错解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • Vue-CLI3.x 设置反向代理的方法

    Vue-CLI3.x 设置反向代理的方法

    这篇文章主要介绍了Vue-CLI3.x 设置反向代理的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Vue的props父传子的示例代码

    Vue的props父传子的示例代码

    这篇文章主要介绍了Vue的props父传子的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05

最新评论