温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue如何自定义指令实现元素拖动

发布时间:2022-01-18 16:39:56 来源:亿速云 阅读:146 作者:iii 栏目:开发技术

这篇文章主要介绍了Vue如何自定义指令实现元素拖动的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇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如何自定义指令实现元素拖动”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI