拉伸宽度

src/views/realTimeMonitor/index.vue

@@ -53,6 +53,7 @@
           </span> -->
         </el-tree>
       </div>
+      <div class="resize" title="收缩侧边栏"></div>
       <!-- 带参数的中心内容右侧参数区 -->
       <div class="picSetBox">
         <div class="swiperBox" v-loading="loadingpic">
@@ -293,7 +294,9 @@ export default {
       return storetermid;
     },
   },
-  mounted() {},
+  mounted() {
+    this.dragControllerDiv();
+  },
   created() {
     this.getLineTreeList();
     this.getDateTime();
@@ -802,7 +805,49 @@ export default {
     //   this.$router.push({ path: "/realTimeSearch" });
     //   // sessionStorage.setItem("keyPath", " realTimeSearch");
     // },
+    dragControllerDiv() {
+      var resize = document.getElementsByClassName("resize");
+      var left = document.getElementsByClassName("sideBar");
+      var mid = document.getElementsByClassName("picSetBox");
+      var box = document.getElementsByClassName("monitor-container");
+      for (let i = 0; i < resize.length; i++) {
+        // 鼠标按下事件
+        resize[i].onmousedown = function (e) {
+          //颜色改变提醒
+          resize[i].style.background = "#128071";
+          var startX = e.clientX;
+          resize[i].left = resize[i].offsetLeft;
+          // 鼠标拖动事件
+          document.onmousemove = function (e) {
+            var endX = e.clientX;
+            var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
+            var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
+
+            if (moveLen < 290) moveLen = 290; // 左边区域的最小宽度为32px
+            if (moveLen > maxT - 600) moveLen = maxT - 600; //右边区域最小宽度为150px
+
+            resize[i].style.left = moveLen; // 设置左侧区域的宽度
+
+            for (let j = 0; j < left.length; j++) {
+              left[j].style.width = moveLen + "px";
+              mid[j].style.width = box[i].clientWidth - moveLen - 3 + "px";
+            }
+          };
+          // 鼠标松开事件
+          document.onmouseup = function (evt) {
+            //颜色恢复
+            resize[i].style.background = "#dcdfe6";
+            document.onmousemove = null;
+            document.onmouseup = null;
+            resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
+          };
+          resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
+          return false;
+        };
+      }
+    },
   },
+
   destroyed() {
     clearInterval(this.treetimer);
     this.treetimer = null;
@@ -831,7 +876,7 @@ export default {
     border-radius: 4px;
     .sideBar {
       width: 300px;
-      border-right: 1px solid @border-color-base;
+      //border-right: 1px solid @border-color-base;
       display: flex;
       flex-direction: column;
       padding: 16px 0px;
@@ -865,6 +910,20 @@ export default {
         color: #d3d3d3;
       }
     }
+    /*拖拽区div样式*/
+    .resize {
+      cursor: col-resize;
+      float: left;
+      position: relative;
+      background-color: #dcdfe6;
+      width: 3px;
+      height: 100%;
+      /*拖拽区鼠标悬停样式*/
+      &:hover {
+        background-color: #169e8c;
+      }
+    }
+
     .picSetBox {
       display: flex;
       width: 100%;
@@ -872,6 +931,7 @@ export default {
       //background: #fcc;
       flex: 1;
       overflow: hidden;
+      border-left: 1px solid @border-color-base;
       .swiperBox {
         -webkit-box-flex: 1;
         -ms-flex: 1;