element ui 中 dialog对话框 拖拽

有需求才有动力

看 dialog 的样式，发现是已经进行了定位了，加个 top 和 left 就能对 dialog 的位置进行调整

.el-dialog {
    position: relative;
    margin: 0 auto 50px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
    box-sizing: border-box;
    width: 50%;
}

创建一个自定义指令，加个监听事件，在特定的区域监听鼠标的按下，移动，抬起，做不同的操作

全局注册

// main.js

// 注册一个自定义指令 -- 移动
Vue.directive('dialog-move',function(el,bingding){
  // 获取需要移动的 dialog 盒子部分
  let moveBox = el.firstElementChild
  // 获取盒子的 header 部分，该部分用做按下移动的功能区域
  let moveElement = el.firstElementChild.firstElementChild
  // 鼠标按下事件
  function mouseDown (e){
    // 鼠标样式变化
    el.style.cursor = 'move'
    // 记录鼠标位置减去盒子距离浏览器之后剩余的距离
    let X = e.clientX - moveBox.offsetLeft
    let Y = e.clientY - moveBox.offsetTop
    function mouseMove(e){
      // 取消自带的margin，避免对移动的影响
      moveBox.style.margin = 'inherit'
      // 拖动
      moveBox.style.top = e.clientY - Y + 'px'
      moveBox.style.left = e.clientX - X + 'px'
    }
    // 鼠标移动
    document.addEventListener('mousemove',mouseMove)

    // 鼠标抬起
    document.addEventListener('mouseup',()=>{
      el.style.cursor = 'auto'
      // 取消监听鼠标移动
      document.removeEventListener('mousemove',mouseMove)
    })
  }
  // 创建鼠标按下监听事件
  moveElement.addEventListener('mousedown',mouseDown)
})

引用自定义指令

给 dialog 加上 v-dialog-move

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose"
  v-dialog-move>
  ...
</el-dialog>

好了，加上自定义指令的盒子就可以拖动了

注意的问题

1. dialog 组件最外层是一个全屏的 box ，这部分没办法操作，需要拿到里面的子元素
2. dialog 组件自带的 margin 样式需要在操作中删除，避免影响拖动效果