vue.js封装拖拽组件，移动到浏览器边框自动隐藏

先看效果

效果图
要实现拖拽主要就是要计算出拖拽组件在浏览器窗口的位置，距离浏览器窗口一定距离时将组件定位到浏览器边上。
需要了解clientX，clientY, offsetLeft， offsetTop, document.documentElement.clientWidth,document.documentElement.clientHeight等概念。】
使用方式较简单，如下，在uni-drag组件中添加需要拖拽的内容即可。

<template>
  <uni-drag @drag-start="dragStart" @drag-end="dragEnd">
    <div class="test-drag">dragMe</div>
  </uni-drag>
</template>
<script>
export default {
  methods: {
    dragStart: function(event) {
      this.$message({
        type: 'info',
        message: `拖拽开始，通过console可以查看event参数, ${JSON.stringify(event)}`
      })
      console.info('拖拽开始', event)
    },
    dragEnd: function(event) {
      this.$message({
        type: 'info',
        message: `拖拽结束，通过console可以查看event参数, ${JSON.stringify(event)}`
      })
      console.info('拖拽结束', event)
    }
  }
}
</script>
<style scoped>
.test-drag {
  padding: 50px;
  background-color: #149ef1;
  width: 50px;
}
</style>

组件主要源码如下：完整代码请戳这里：传送门

  directives: {
    drag: {
      bind: function(el, binding, vnode) {
        const moveEl = el
        moveEl.onmousedown = (event) => {
          // 获取事件触发位置与元素左上角的偏移量
          const disX = event.clientX - moveEl.offsetLeft
          const disY = event.clientY - moveEl.offsetTop
          // 页面的宽度和高度
          const width = document.documentElement.clientWidth
          const height = document.documentElement.clientHeight
          // 触发拖拽开始事件
          vnode.context.$emit('drag-start', event)
          document.onmousemove = (dEvent) => {
            // 鼠标移动时，将元素定位到鼠标移动的位置，减去鼠标与元素左上角的偏移量
            const left = dEvent.clientX - disX
            const top = dEvent.clientY - disY
            moveEl.style.left = left + 'px'
            moveEl.style.top = top + 'px'
          }
          document.onmouseup = (event) => {
            document.onmousemove = null
            document.onmouseup = null
            const box = moveEl.getBoundingClientRect()
            // 当鼠标up时判断当前元素位置是否满足隐藏条件
            let left = box.x
            let top = box.y
            if (vnode.context.hide) {
              left = left > width - moveEl.offsetWidth - vnode.context.hideMinMargin ? width - vnode.context.minShowWidth
                : left < -(moveEl.offsetWidth - vnode.context.minShowWidth) || left < vnode.context.hideMinMargin ? -(moveEl.offsetWidth - vnode.context.minShowWidth) : left
              // 在4个角落时，防止x和y轴同时隐藏，判断x轴隐藏了，y轴便固定为0，或着最底部
              top = left === width - vnode.context.minShowWidth || left === -(moveEl.offsetWidth - vnode.context.minShowWidth) ? (top < vnode.context.hideMinMargin ? 0
                : box.bottom > height - vnode.context.hideMinMargin ? height - box.height : top)
                : top < vnode.context.hideMinMargin ? -(box.height - vnode.context.minShowWidth)
                  : box.bottom > height - vnode.context.hideMinMargin ? height - vnode.context.minShowWidth : top
            }
            moveEl.style.left = left + 'px'
            moveEl.style.top = top + 'px'
            // 触发拖拽结束事件
            vnode.context.$emit('drag-end', event)
          }
        }
      }
    }
  }