vue+element弹窗可拖拽拉伸和弹窗内table高度自适应

   需求是这样的：需要将目前的el-dialog弹窗都改成可拉伸和拖拽的。并且做自适应。（一番交涉下来，最终是如果弹窗里面有table的话，我们给table的高度自适应，普通表单不需要）。

   确定了需求，准备开发，在网上找了一圈，大家的都差不多，所以我在他们的基础上加了一些自己的改动。说说目前网上其他我搜到的文件用在我们的项目的问题：1.拖动的时候到处飞，没有加边界条件。 2.可以把弹窗拉的非常小，以至于出现滚动条之后，右侧再无法拉伸。3.使用了拉伸的方法后，弹窗内的form表单无法进行拖拽选中input内的文字。

     针对上面几个问题，改了些地方。一起来写吧！

   1.开始自定义指定

        从别人的文档“借鉴”过来的自定义指令外壳。将几个方法都拿出来当方法了。（公司要求方法行数不能大于50行_(:з」∠)_，只能硬拆）

import Vue from 'vue';
// v-dialogDrag: 弹窗拖拽属性
Vue.directive('dialogDrag', {
  bind(el, binding, vnode, oldVnode) {
    // 弹框可拉伸最小宽高，不设置的话，会导致出现滚动条无法进行拉伸。
    let minWidth = 620
    let minHeight = 370
    // 获取弹框头部
    const dialogHeaderEl = el.querySelector('.dialog_header');
    // 获取弹窗
    const dragDom = el.querySelector('.el-dialog')
    // 给弹窗加上overflow:auto；不然缩小时框内的标签可能超出dialog   
    dragDom.style.overflow = 'auto'
    // 头部加上可拖动cursor
    dialogHeaderEl.style.cursor = 'move'
    // 头部拖拽
    dialogHeaderEl.onmousedown = (e) => {
      moveDown(e,dialogHeaderEl,dragDom)
    },
    document.onmousemove = function (e) {
      // 获取弹窗的边界位置值
      let domRect = dragDom.getBoundingClientRect()
      let endX =e.clientX,
          endY=e.clientY
      // 获取鼠标在边角的样式。头部因为有拖拽事件，所以无法拉伸。 
      cursorType(e,el,dragDom)
      // 不在弹窗 - 10px 的内部，才走这些方法。防止拉伸事件影响表单选中文本
      if(isBorder(domRect,{endX,endY})){
        dragDom.onmousedown = e =>{
          const initHeight = dragDom.clientHeight
          const clientX = e.clientX // clientX事件属性返回当事件被触发时相对于浏览器页面（或客户区）的水平坐标
          const clientY = e.clientY
          let elW = dragDom.clientWidth
          let elH = dragDom.clientHeight
          let EloffsetLeft = dragDom.offsetLeft
          let EloffsetTop = dragDom.offsetTop 
          dragDom.style.userSelect = 'text'
          let ElscrollTop = el.scrollTop
          // 判断点击的位置是不是为头部
        if (
          clientX > EloffsetLeft &&
          clientX < EloffsetLeft + elW &&
          clientY > EloffsetTop &&
          clientY < EloffsetTop + 100
        ) {
          // 如果是头部在此就不做任何动作，以上有绑定dialogHeaderEl.onmousedown = moveDown;
        } else {
          let diffX = endX - clientX,diffY = endY - clientY
          document.onmousemove = e => mousemove(e,dragDom,clientX,EloffsetLeft,elW,minWidth,ElscrollTop,clientY,EloffsetTop,elH,minHeight,diffX,diffY)
          // 拉伸结束
          isOver(dragDom,minHeight,initHeight)
         }
        }
      }
    }
  }
})

2.弹窗头部拖拽事件

弹窗头部拖拽事件单独拿出来写。加上边界条件。不然弹窗拖到莫名其妙地方去啦~

   // 弹窗头部拖拽事件
  function moveDown(e,dialogHeaderEl,dragDom){
    let dialogW = 0 //鼠标按下，计算当前元素的大小
    let dialogH = 0
    let pageW = document.documentElement.clientWidth // 页面宽度
    let pageH = document.documentElement.clientHeight //页面高度
     // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
    // 鼠标按下，计算当前元素距离可视区的距离
    const disX = e.clientX - dialogHeaderEl.offsetLeft
    const disY = e.clientY - dialogHeaderEl.offsetTop
    // 对话框宽高
    dialogW = dragDom.offsetWidth
    dialogH = dragDom.offsetHeight
    const minDragDomLeft = dragDom.offsetLeft
    const maxDragDomLeft = pageW - dragDom.offsetLeft - dialogW
    const minDragDomTop = dragDom.offsetTop
    const maxDragDomTop = pageH - dragDom.offsetTop - dialogH
    // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
    if (sty.left.includes('%')) {
      styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
      styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
    } else {
      styL = +sty.left.replace(/\px/g, '')
      styT = +sty.top.replace(/\px/g, '')
    }
    document.onmousemove = function(e) {
      // 通过事件委托，计算移动的距离
      let left = e.clientX - disX
      let top = e.clientY - disY
        // 边界处理
        if (-(left) > minDragDomLeft) {
          left = -(minDragDomLeft)
        } else if (left > maxDragDomLeft) {
          left = maxDragDomLeft
        }
        if (-(top) > minDragDomTop) {
          top = -(minDragDomTop)
        } else if (top > maxDragDomTop) {
          top = maxDragDomTop
        }
        // 移动当前元素
        dragDom.style.left = `${left + styL}px`
        dragDom.style.top = `${top + styT}px`
        
      // 鼠标抬起停止弹窗移动
      document.onmouseup = function () {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }

3.鼠标的样式判断方法

  因为头部有拖拽事件了，所以无法再拉伸，我们只在左右，左下角和右下角添加拉伸的样式

 function cursorType(e,el,dragDom){
    if(
      dragDom.offsetTop + dragDom.clientHeight - 10 < e.clientY &&
      e.clientY < dragDom.offsetTop + dragDom.clientHeight && 
      dragDom.offsetLeft < e.clientX && 
      e.clientX < dragDom.offsetLeft + 10
    ){
      dragDom.style.cursor = 'sw-resize' // 左下
    }else if (
      dragDom.offsetLeft + dragDom.clientWidth - 10 < e.clientX &&
      e.clientX < dragDom.offsetLeft + dragDom.clientWidth && 
      dragDom.offsetTop +dragDom.clientHeight - 10 < e.clientY &&
      e.clientY < dragDom.offsetLeft + dragDom.clientHeight
      ){
        dragDom.style.cursor = 'se-resize' // 右下
    } else if (
      e.clientX > dragDom.offsetLeft + dragDom.clientWidth - 10 ||
      dragDom.offsetLeft + 10 > e.clientX
    ){
      dragDom.style.cursor = 'w-resize' // 左
    }else if (el.scrollTop + e.clientY > dragDom.offsetTop + dragDom.clientHeight -10){
      dragDom.style.cursor = 's-resize' // 右
    }else{
      dragDom.style.cursor = 'default'
      dragDom.onmousedown = null
    }
  }

4.鼠标拖拽弹窗，左拉右拉

拉伸弹窗，左拉和右拉，只要一个拉伸，左右都会同时放大。这里可以根据各自需求去改就行。如果不需要同时放大，在这个方法里改

 function mousemove(e,dragDom,clientX,EloffsetLeft,elW,minWidth,ElscrollTop,clientY,EloffsetTop,elH,minHeight,diffX,diffY){
    // 移动时禁用默认事件
    e.preventDefault()
    // 左侧鼠标拖拽位置
    if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
      // 往左拖拽
      if (clientX > e.clientX) {
        dragDom.style.width = elW + (clientX - e.clientX) * 2 + 'px'
      }
      // 往右拖拽
      if (clientX < e.clientX) {
        if (dragDom.clientWidth < minWidth) {
        // 设置最小宽度，不能无限缩小，滚动条会让弹窗无法拉伸
          dragDom.style.width = minWidth
        } else {
          dragDom.style.width = elW - (e.clientX - clientX) * 2 + 'px'
        }
      }
    }
    // 右侧鼠标拖拽位置
    if (clientX > EloffsetLeft + elW - 10 && clientX < EloffsetLeft + elW) {
      // 往左拖拽
      if (clientX > e.clientX) {
        if (dragDom.clientWidth < minWidth) {
          dragDom.style.width = minWidth
        } else {
          dragDom.style.width = elW - (clientX - e.clientX) * 2 + 'px'
        }
      }
      // 往右拖拽
      if (clientX < e.clientX) {
        dragDom.style.width = elW + (e.clientX - clientX) * 2 + 'px'
      }
    }
    // 底部鼠标拖拽位置
    if (
      ELscrollTop + clientY > EloffsetTop + elH - 20 &&
      ELscrollTop + clientY < EloffsetTop + elH
    ) {
      // 往上拖拽
      if (clientY > e.clientY) {
        if (dragDom.clientHeight < minHeight) {
         // 设置最小高度，不能无限缩小，滚动条会让弹窗无法拉伸
          dragDom.style.height = minHeight
        } else {
          dragDom.style.height = elH - (clientY - e.clientY) * 2 + 'px'
        }
      }
      // 往下拖拽
      if (clientY < e.clientY) {
        boundaryLimit('bottom',dragDom,diffX,diffY,elH,clientY)
      }
    }
  }

5.校验鼠标移动的位置是否在弹窗边缘

   这里多说几句，因为指令写的拉伸事件，导致整个弹窗的onmousedown事件都跟拉伸挂钩。所以导致弹窗中表单无法onmousedown去选中文字复制。这里2个思路都可以实现：A：在4事件里，就是拖拽事件里，判断如果不是在边界上拖拽，就阻止冒泡事件，不让弹窗拉伸的事件和表单选中input框文字的事件起冲突。 B：就是我写的这个方法，做一个判断条件，如果在弹窗边缘，才可以走拉伸的事件。 方法很多，大家可以自己试试！

 // 校验鼠标移动的位置是否在弹窗边缘
  function isBorder(domRect,cursorPosition){
    let left = domRect.left,
        right = domRect.right,
        top = domRect.top,
        bottom = domRect.bottom,
        cursorX = cursorPosition.endX,
        cursorY = cursorPosition.endY
    if(
      (left > cursorX - 10 && left  cursorX -10 && right < cursorX +10) ||
      (top > cursorY -10 && top < cursorY + 10) ||
      (bottom > cursorY - 10 && bottom < cursorY + 10)
      ){
        return true
      } else {
      return false
    } 
  }

6.鼠标拉伸结束，该让一切消失了

 // 鼠标拉伸结束
  function isOver(dragDom,minHeight,initHeight){
    document.onmouseup = function(e){
      // 防止拉伸高度太短，导致滚动条，所以这里必须再设置一次最小高度
      if(dragDom.clientHeight <= minHeight){
        dragDom.style.height = minHeight + 'px'
      }
       /* 给弹窗里的table添加上 ‘drag-flex-table’类名，表示拖拽的弹窗里表格需要自适应。
          动态给table设置高度。
          这里只适用于弹窗只有一个table，如果多个table，还需要根据实际情况进行适当更改
        */
      if(dragDom.querySelector('.drag-flex-table')){
        const elem = dragDom.querySelector('.drag-flex-table')
        let tableHeight = dragDom.clientHeight - initHeight + elem.clientHeight
        // 36px在这里是table的theader的高度，我们给table_body去设置
        elem.style.height = `${tableHeight - 36}px`
      }
      document.onmousemove = null
      document.onmouseup = null
    }
  }

7.差点忘记还有一个拉伸边界条件！

这里只写了一个下拉的边界条件。虽然也是有点问题的。但是无伤大雅了！

 // 拉伸的边界条件
  function boundaryLimit(type,dragDom,diffX,diffY,elH,clientY){
    const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
    if(type == 'bottom'){
      if(diffX + dragDom.clientHeight > screenHeight - dragDom.offsetTop){
        dragDom.style.height = screenHeight - dragDom.offsetTop
      }else{
        dragDom.style.height = elH + (e.clientY -clientY) + 'px'
      }
    }
  }

综上，一个可拖拽并且可拉伸，还加了边界条件的自定义指令结束了。使用方法，同其他自定义指令一样，在el-dialog上添加自定义指令。如果弹窗里有需要自适应的table，给这个table添加'drag-flex-table'类名就行！如果大家有更好的写法，欢迎在评论区告诉我！