您好,登录后才能下订单哦!
这篇文章主要介绍了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如何自定义指令实现元素拖动”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。