【无标题】

自定义弹窗hears拖动

自定义的弹窗鼠标放在弹窗某一部分可以拖动实现。

步骤

1、新建js文件。自定义指令。

const dragx6 =function (el, binding, vnode) {
  const dialogHeaderEl = el.querySelector('.headers')
  const oDiv=el;//当前元素

  dialogHeaderEl.onmousedown = (e) => {
       //鼠标按下，计算当前元素距离可视的距离
       let disX=e.clientX-oDiv.offsetLeft;
       let disY=e.clientY-oDiv.offsetTop;
       document.onmousemove=function(e){
           //通过事件委托，计算移动的距离
           let l=e.clientX-disX;
           let t=e.clientY-disY;
           //移动当前元素
           oDiv.style.left=l+'px';
           oDiv.style.top=t+'px';
       }
       document.onmouseup=function(e){
           document.onmousemove=null;
           document.onmouseup=null;
       }
    }

    document.onmouseup = function(e) {
      document.onmousemove = null
      document.onmouseup = null
    }
}
export default dragx6

2、在使用的弹窗中加入指令。

<div class="x6-modal " v-dragx6 v-show="viewDialog">

      <div class="headers">
        <div class="top-btns">
          <img
            @click="handleClose"
            src="@/assets/gis-rockets/popup/close-kuang.png"
            alt=""
          />
        </div>
      </div>
</div>