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

21 篇文章 0 订阅
20 篇文章 0 订阅

   需求是这样的:需要将目前的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 && 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'类名就行!如果大家有更好的写法,欢迎在评论区告诉我!

  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值