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 = 620let minHeight = 370// 获取弹框头部const dialogHeaderEl = el.querySelector('.dialog_header');// 获取弹窗const dragDom = el.querySelector('.el-dialog')// 给弹窗加上overflow:auto；不然缩小时框内的标签可能超出dialog   dragDom.style.overflow = 'auto'// 头部加上可拖动cursordialogHeaderEl.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.clientHeightconst clientX = e.clientX // clientX事件属性返回当事件被触发时相对于浏览器页面（或客户区）的水平坐标const clientY = e.clientYlet elW = dragDom.clientWidthlet elH = dragDom.clientHeightlet EloffsetLeft = dragDom.offsetLeftlet 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 - clientYdocument.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 = 0let 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.offsetLeftconst disY = e.clientY - dialogHeaderEl.offsetTop// 对话框宽高dialogW = dragDom.offsetWidthdialogH = dragDom.offsetHeightconst minDragDomLeft = dragDom.offsetLeftconst maxDragDomLeft = pageW - dragDom.offsetLeft - dialogWconst minDragDomTop = dragDom.offsetTopconst maxDragDomTop = pageH - dragDom.offsetTop - dialogH// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为pxif (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 - disXlet 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 = nulldocument.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.endYif((left > cursorX - 10 && left <cursorX + 10) || (right > 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 = nulldocument.onmouseup = null}}

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

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

 // 拉伸的边界条件function boundaryLimit(type,dragDom,diffX,diffY,elH,clientY){const screenHeight = document.documentElement.clientHeight || document.body.clientHeightif(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'类名就行！如果大家有更好的写法，欢迎在评论区告诉我！