关于Vue 自定义指令实现元素拖动的详细代码

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

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

// 使用
<input v-focus>

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
          }
        }
      }
    }
  }