vue3directives自定义指令做个聊天窗口拖拽和拖拽按钮

篇首语：本文由编程笔记#小编为大家整理，主要介绍了vue3-directives 自定义指令 做个聊天窗口拖拽和拖拽按钮相关的知识，希望对你有一定的参考价值。

drag
directives:
focus:
// 指令的定义
mounted(el, binding, vnode)
/** el可以获取当前dom节点&＃xff0c;并且进行编译&＃xff0c;也可以操作事件 **/
/** binding指的是一个对象&＃xff0c;一般不用 **/
/** vnode 是 Vue 编译生成的虚拟节点 **/
let x &＃61; 0
let y &＃61; 0
let l &＃61; 0
let t &＃61; 0
let isDown &＃61; false
el.onmousedown &＃61; function (e)
x &＃61; e.clientX
y &＃61; e.clientY
l &＃61; el.offsetLeft
t &＃61; el.offsetTop
isDown &＃61; true
el.style.cursor &＃61; &＃39;move&＃39;
window.onmousemove &＃61; function (e)
if (isDown &＃61;&＃61; false)
return

let nx &＃61; e.clientX
let ny &＃61; e.clientY
let nl &＃61; nx - (x - l)
let nt &＃61; ny - (y - t)
el.style.left &＃61; nl &＃43; &＃39;px&＃39;
el.style.top &＃61; nt &＃43; &＃39;px&＃39;

window.onmouseup &＃61; function ()
isDown &＃61; false
el.style.cursor &＃61; &＃39;default&＃39;
window.onmousemove &＃61; null
window.onmouseup &＃61; null

return false