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

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

这篇文章主要介绍了Vue如何自定义指令实现元素拖动的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue如何自定义指令实现元素拖动文章都会有所收获,下面我们一起来看看吧。

一、自定义指令

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

1、自定义指令定义范围

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

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

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

// 使用
<input v-focus>

2、钩子函数

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

3、函数参数

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

name:指令名

value:指令绑定的值

oldValue:指令绑定的前一个值

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

arg:传给指令的参数

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

二、拖动实现

拖动的实现:给目标 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如何自定义指令实现元素拖动”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. bootstrap拖动布局元素如何实现
  2. 详解在Vue中通过自定义指令获取dom元素

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

vue

上一篇:C#值类型、引用类型、泛型、集合的表达式树怎么创建

下一篇:maven依赖的version声明控制方式是什么

相关阅读

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

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