核心提示：在vue中，为简单的组件交互定义自定义指令是明智的，它可以节省一大部分开发事件，本文简单演示拖拽指令的实现及引用main.js： 定义Vue.directive(drag, {inserted: fu...
在vue中，为简单的组件交互定义自定义指令是明智的，它可以节省一大部分开发事件，本文简单演示拖拽指令的实现及引用
main.js： 定义
Vue.directive('drag', {
inserted: function (el) {
el.onmousedown = function (e) {
let l = e.clientX - el.offsetLeft
let t = e.clientY - el.offsetTop
document.onmousemove = function (e) {
el.style.left = e.clientX - l + 'px'
el.style.top = e.clientY - t + 'px'
}
el.onmouseup = function () {
el.style.width = '100px'
el.style.height = '100px'
document.onmousemove = null
el.onmouseup = null
}
}
}
})
html: 引用
拖拽
