<button v-focus style="position: absolute">drag</button>
directives: {
focus: {
// 指令的定义
mounted(el, binding, vnode) {
/** el可以获取当前dom节点,并且进行编译,也可以操作事件 **/
/** binding指的是一个对象,一般不用 **/
/** vnode 是 Vue 编译生成的虚拟节点 **/
let x = 0
let y = 0
let l = 0
let t = 0
let isDown = false
el.onmousedown = function (e) {
x = e.clientX
y = e.clientY
l = el.offsetLeft
t = el.offsetTop
isDown = true
el.style.cursor = 'move'
window.onmousemove = function (e) {
if (isDown == false) {
return
}
let nx = e.clientX
let ny = e.clientY
let nl = nx - (x - l)
let nt = ny - (y - t)
el.style.left = nl + 'px'
el.style.top = nt + 'px'
}
window.onmouseup = function () {
isDown = false
el.style.cursor = 'default'
window.onmousemove = null
window.onmouseup = null
}
return false
}
}
}
}
vue3-directives 自定义指令 做个聊天窗口拖拽和拖拽按钮
最新推荐文章于 2024-07-19 16:32:35 发布