vue 页面实现拖拽调整元素宽度

方法可分为两种第一种使用iviewUI 的split 面板分割组件第二种就是自己写一个监听鼠标点击移动位置

一. 使用iview 的split 面板分割组件

　　这里是说明链接 https://www.cnblogs.com/wjian0916/p/16227825.html

二. 监听鼠标

1.展示效果

2.页面代码

1 <div class="box" ref="box">
2   <index-left class='left' ref="indexLeft" @refreshIndex="leftChange"></index-left>
3   <div class="resize" title="收缩侧边栏"></div>
4   <index-right class='right' ref="indexRight" @refreshIndex="rightChange"></index-right>
5 </div>

3.js 代码

 mounted () {
    this.dragControllerDiv();
  },

 1 dragControllerDiv: function () {
 2       var resize = document.getElementsByClassName('resize')
 3       var left = document.getElementsByClassName('left')
 4       var right = document.getElementsByClassName('right')
 5       var box = document.getElementsByClassName('box')
 6       for (let i = 0; i < resize.length; i++) {
 7         // 鼠标按下事件
 8         resize[i].onmousedown = function (e) {
 9           var startX = e.clientX // 基于浏览器位置这里与边框还有40的距离
10           // 鼠标拖动事件
11           document.onmousemove = function (e) {
12             resize[i].left = startX - 40
13             var endX = e.clientX
14             var moveLen = resize[i].left + (endX - startX) // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
15             var maxT = box[i].clientWidth - resize[i].offsetWidth // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
16             if (moveLen < 32) moveLen = 32 // 左边区域的最小宽度为32px
17             if (moveLen > maxT - 150) moveLen = maxT - 150 // 右边区域最小宽度为150px
18             resize[i].style.left = moveLen // 设置左侧区域的宽度
19             for (let j = 0; j < left.length; j++) {
20               // left[j].style.width = (moveLen / box[i].clientWidth) * 100 + '%'
21               left[j].style.width = moveLen + 'px'
22               right[j].style.left = left[j].style.width
23               resize[i].style.left = left[j].style.width
24               // right[j].style.width = ((box[i].clientWidth - moveLen) / box[i].clientWidth) * 100 + '%'
25               right[j].style.width = (box[i].clientWidth - moveLen) + 'px'
26             }
27           }
28           // 鼠标松开事件
29           document.onmouseup = function (evt) {
30             document.onmousemove = null
31             document.onmouseup = null
32             resize[i].releaseCapture && resize[i].releaseCapture() // 当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
33           }
34           resize[i].setCapture && resize[i].setCapture() // 该函数在属于当前线程的指定窗口里设置鼠标捕获
35           return false
36         }
37       }
38     }

4. 样式代码

 1 .left {
 2     position: absolute;
 3     left: 0;
 4     width: calc(15%);
 5     height: 100%;
 6     overflow-y: auto;
 7     overflow-x: auto;
 8     float: left;
 9   }
10   .resize {
11     position: absolute;
12     left: 15%;
13     top: 0;
14     bottom: 0;
15     width: 5px;
16     cursor: col-resize;
17     z-index: 100;
18     background-color: transparent;
19     border-left: 1px solid #ececec;
20   }
21   .right {
22     position: absolute;
23     left: 15%;
24     width: 85%;
25     height: 100%;
26     float: left;
27   }
28   .box {
29     width: 100%;
30     height: 663px;
31   }

vue 页面实现拖拽调整元素宽度

推荐阅读