添加拖拽条改变外层容器宽度

最新推荐文章于 2025-04-03 17:07:35 发布

原创最新推荐文章于 2025-04-03 17:07:35 发布 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何使用Vue自定义指令v-barDrag来实现通过拖拽条改变外层容器的宽度，提供了V3.0版本的更新内容，并记录了V2.0和V1.0的方法作为历史参考。涉及到的代码包括HTML结构、CSS样式和JavaScript方法。

【V3.0】使用自定义指令绑定拖拽

官方文档：
https://cn.vuejs.org/v2/guide/custom-directive.html#%E7%AE%80%E4%BB%8B

<div></div>
<div v-barDrag></div>
<div></div>

Vue.directive('barDrag', {
  bind (el, binding, vnode, oldVnode) {
    Vue.nextTick(() => { // 不用nextTick获取不到其他dom节点
      // 设置是否移动标识
      let removeFlag = false
      // 获取左边缩放的div对象
      let bar = el
      let dragLeft = el.previousElementSibling.style
      let dragRight = el.nextElementSibling.style
      let doc = el.parentNode
      let x = 0 // 鼠标的 X 和 Y 轴坐标
      // 挂载鼠标事件
      bar.addEventListener('mousedown', moveDownMouse, false)
      // 注意移动和鼠标失焦事件需要绑定在dom上，若只是绑定在bar上只能在bar上移动\失焦才有效
      doc.addEventListener('mousemove', mouseMove, false)
      doc.addEventListener('mouseup', mouseUp, false)

      function moveDownMouse (e) {
        removeFlag = true
        // 按下元素后 计算当前鼠标与对象计算后的坐标
        x = e.clientX - bar.offsetWidth - dragLeft.width.replace('px', '')
        // 支持 setCapture时 捕捉焦点 // 设置事件 // 绑定事件
        if (bar.setCapture) {
          bar.setCapture()
          bar.onmousemove = function (ev) {
            mouseMove(ev || event)
          }
          bar.onmouseup = mouseUp
        } else {
          // bar.addEventListener('mousemove', mouseMove, false)
          // bar.addEventListener('mouseup', mouseUp, false)
          // jQuery(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp)
        }
        // 防止默认事件发生
        e.preventDefault()
        store.state.dragBar = false // 用于通知echarts等由于宽度变化了重新加载
      }
      // 移动事件
      function mouseMove (e) {
        if (removeFlag) {
          // 宇宙超级无敌运算中
          let width = e.clientX - x
          if (width < 200) {
            dragLeft.width = '200px'
          } else if (width > 400) {
            dragLeft.width = '400px'
          } else {
            dragLeft.width = width + 'px'
          }
          // 若不计算右边宽度，拖动条会被挤压 减去拖动条的宽度注意与样式.dragBar设置保持一致
          dragRight.width = 'calc((100% - 3px) - ' + dragLeft.width + ')'
        }
      }
      // 停止事件
      function mouseUp () {
        removeFlag = false
        // 支持 releaseCapture时 // 释放焦点 // 移除事件 // 卸载事件
        if (bar.releaseCapture) {
          bar.releaseCapture()
          bar.onmousemove = bar.onmouseup = null
        } else {
          // bar.removeEventListener('mousemove', mouseMove, false)
          // bar.removeEventListener('mouseup', mouseUp, false)
          // jQuery(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp)
        }
        store.state.dragBar = true // 用于通知echarts等由于宽度变化了重新加载
      }
    })
  }
})

只需要对中间的拖动条div绑定v-barDrag指令即可。

———————————— 以下方法比较老了仅作记录 ————————————

【V2.0】：添加拖拽条改变外层容器宽度

效果：
在这里插入图片描述
代码：
html 注意四个部分的id绑定即可

<el-container id="dept">
    <el-aside width="220px" id="drag-dept-left">
    </el-aside>
    <div id="dragBar-dept" class="dragBar"></div>
    <el-main id="drag-dept-right" class="drag-right">
    </el-main>
</el-container>

css 仅供参考自行修改宽度控制

.dragBar {
  width: 3px;
  height: 100%;
  background: #01e4fd;
  cursor: e-resize;
}
.drag-right {
  padding-right: 0px;
  width: calc(100% - 213px);
}

js 调用

mounted () {
    // 给缩放拖动条挂载相应方法 入参(拖动条ID，左侧ID，右侧ID，外层ID)
    this.$_comFun.bindResize('dragBar-dept', 'drag-dept-left', 'drag-dept-right', 'dept')
  },

js 全局变量

export default new Vuex.Store({
    state: {
      // 拖动滚动条改变内部div宽度
      dragBar: false
    },
    mutations: {
    },
    actions: {
    },
    modules: {
    }
})

js 公共方法

import store from '../index'

// 缩放条拖动进而改变左侧div宽度方法
bindResize (barID, leftID, rightID, docID) {
    // 设置是否移动标识
    let removeFlag = false
    // 获取左边缩放的div对象
    let bar = document.getElementById(barID)
    let dragLeft = document.getElementById(leftID).style
    let dragRight = document.getElementById(rightID).style
    let doc = document.getElementById(docID)
    let x = 0 // 鼠标的 X 和 Y 轴坐标
    // 挂载鼠标事件
    bar.addEventListener('mousedown', moveDownMouse, false)
    // 注意移动和鼠标失焦事件需要绑定在dom上，若只是绑定在bar上只能在bar上移动\失焦才有效
    doc.addEventListener('mousemove', mouseMove, false)
    doc.addEventListener('mouseup', mouseUp, false)

    function moveDownMouse (e) {
      removeFlag = true
      // 按下元素后 计算当前鼠标与对象计算后的坐标
      x = e.clientX - bar.offsetWidth - dragLeft.width.replace('px', '')
      // 支持 setCapture时 捕捉焦点 // 设置事件 // 绑定事件
      if (bar.setCapture) {
        bar.setCapture()
        bar.onmousemove = function (ev) {
          mouseMove(ev || event)
        }
        bar.onmouseup = mouseUp
      } else {
        // bar.addEventListener('mousemove', mouseMove, false)
        // bar.addEventListener('mouseup', mouseUp, false)
      }
      // 防止默认事件发生
      e.preventDefault()
      store.state.dragBar = false
    }
    // 移动事件
    function mouseMove (e) {
      if (removeFlag) {
        // 宇宙超级无敌运算中
        let width = e.clientX - x
        if (width < 200) {
          dragLeft.width = '200px'
        } else if (width > 400) {
          dragLeft.width = '400px'
        } else {
          dragLeft.width = width + 'px'
        }
        // 若不计算右边宽度，拖动条会被挤压
        dragRight.width = 'calc(100% - ' + dragLeft.width + ')'
      }
    }
    // 停止事件
    function mouseUp () {
      removeFlag = false
      // 支持 releaseCapture时 // 释放焦点 // 移除事件 // 卸载事件
      if (bar.releaseCapture) {
        bar.releaseCapture()
        bar.onmousemove = bar.onmouseup = null
      } else {
        // bar.removeEventListener('mousemove', mouseMove, false)
        // bar.removeEventListener('mouseup', mouseUp, false)
      }
      store.state.dragBar = true
    }
}

【V1.0】：添加拖拽条改变外层容器宽度

效果：
在这里插入图片描述
添加拖拽条

<div id="dragBar"></div>

在当前组件加载完后，给拖拽条绑定事件

  mounted () {
    // 给缩放拖动条挂载相应方法 入参(拖动条对象, 左侧div的ID)
    this.bindResize(document.getElementById('dragBar'), 'menu')
  },
  methods: {
	  // 缩放条拖动进而改变左侧div宽度方法
	  bindResize (bar, menu) {
	    /* eslint-disable */
	    // 获取左边缩放的div对象
	    let els = document.getElementById(menu).style
	    let x = 0 // 鼠标的 X 和 Y 轴坐标
	    jQuery(bar).mousedown(function (e) {
	      // 按下元素后 计算当前鼠标与对象计算后的坐标
	      x = e.clientX - bar.offsetWidth - jQuery('#' + menu).width()
	      // 支持 setCapture时 捕捉焦点 // 设置事件 // 绑定事件
	      if (bar.setCapture) {
	        bar.setCapture()
	        bar.onmousemove = function (ev) {
	          mouseMove(ev || event)
	        }
	        bar.onmouseup = mouseUp
	      } else {
	        jQuery(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp)
	      }
	      // 防止默认事件发生
	      e.preventDefault()
	    })
	    // 移动事件
	    function mouseMove (e) {
	      // 宇宙超级无敌运算中
	      els.width = e.clientX - x + 'px'
	    }
	    // 停止事件
	    function mouseUp () {
	      // 支持 releaseCapture时 // 释放焦点 // 移除事件 // 卸载事件
	      if (bar.releaseCapture) {
	        bar.releaseCapture()
	        bar.onmousemove = bar.onmouseup = null
	      } else {
	        jQuery(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp)
	      }
	    }
	    /* eslint-enable */
	  }
  }