Skip to main content
席宇博客

欢迎访问席宇博客

vue自定义全局指令实现拖拽弹窗等元素

全局注册指令 #

注意:bind是vue2的自定义指令事件,如果你在vue3中使用请把bind改为beforeMount,附上vue2指令的生命周期函数和vue3的对比。

vue2vue3备注
bindbeforeMount指令绑定到元素后执行。只执行一次。
insertedmounted元素插入父 DOM 后执行
-beforeUpdate元素本身更新之前执行
componentUpdatedupdated组件和子级更新后执行
-beforeUnmount卸载元素之前执行
unbindunmounted指令被移除,就会执行,也只执行一次
Vue.directive('move', {
  bind(el) {
    
      let moveElement = el.firstElementChild;
      el.mouseDown = (e) => {
        
          // X,Y为计算的偏移量,就是鼠标点击的位置相对于元素左上角圆点的距离
          let X = e.clientX - el.offsetLeft;
          let Y = e.clientY - el.offsetTop;
          const move = (e) => {
              // 0 < left && left < window.innerWidth - el.offsetWidth 保证移动过程中,元素不超出窗口
              let left = e.clientX - X;
              if (0 < left && left < window.innerWidth - el.offsetWidth) {
              el.style.left = left + 'px';
              }
              // console.log(left, window.innerWidth, el.offsetWidth)

              // 0 < top && top < window.innerHeight - el.offsetHeight 保证移动过程中,元素不超出窗口
              let top = e.clientY - Y;
              if (0 < top && top < window.innerHeight - el.offsetHeight) {
              el.style.top = top + 'px';
              }
              // console.log(top, window.innerHeight, el.offsetHeight)
          }
          document.addEventListener('mousemove', move)
          document.addEventListener('mouseup', () => {
              document.removeEventListener('mousemove', move)
          })
      }
      moveElement.addEventListener('mousedown', el.mouseDown);
  }
})

使用 #

<div v-move> </div>

优化空间 #

指令来源于互联网,感觉还有优化的空间,例如 1.目前是默认指定元素的第一个子元素为绑定拖拽事件的元素,一般为弹窗的title区。可以再加一个参数v-mode="#title"来自定义绑定拖拽事件的元素。 2.目前弹窗关闭后再次打开,上次拖拽添加的"top"和"left"还在,会导致弹窗不能恢复到默认位置,只能在弹窗关闭的事件里再额外执行this.$refs["绑定指令的弹窗元素"].style.cssText = 'display: none;',使用起来比较麻烦,最好能在指令里能监听元素状态是否为'display: none;',如果是none隐藏状态,就删除元素style中的"top"和"left"