席宇博客

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

  • 时间:
  • 分类:
    IT
  • 标签:
    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"