拖拽

src/views/module_interLock/InterlockSummary/index.vue

@@ -1,65 +1,146 @@
 <template>
-    <div class="all">
-        <div class="left">
-            <u-equipment-tree @select="selectEquipment"></u-equipment-tree>
-        </div>
-        <div class="right">
-          <interlock-summary-list ref="summaryList" :selectData="selectData"></interlock-summary-list>
-        </div>
+  <div class="all" id="box" ref="box">
+    <div class="left" id="left">
+      <u-equipment-tree @select="selectEquipment"></u-equipment-tree>
     </div>
+    <div class="resize" id="resize" title="收缩侧边栏">⋮</div>
+    <div class="right" id="right">
+      <interlock-summary-list ref="summaryList" :selectData="selectData"></interlock-summary-list>
+    </div>
+  </div>
 </template>
 
 <script>
-import InterlockSummaryList from './InterlockSummaryList.vue';
+  import InterlockSummaryList from './InterlockSummaryList.vue';
+
+  export default({
+    components: {
+      InterlockSummaryList
+    },
+    data () {
+      return {
+        selectData: {}
+      }
+    },
+    mounted() {
+      this.dragControllerDiv()
+    },
+    methods: {
+      selectEquipment(selectedKeys,e){
+        // console.log(99,selectedKeys,e)
+        if (selectedKeys.length == 0) {
+          this.$nextTick(()=>{
+            this.$refs.summaryList.searchReset();
+          })
+        } else {
+          let interlockType = e.selectedNodes[0].data.props.interlockType
+          let pid = e.selectedNodes[0].data.props.pid
+          // console.log(88,interlockType)
+          this.selectData.interlockType = interlockType
+          this.selectData.pid = pid
+          this.selectData.id = e.selectedNodes[0].data.props.id
+          this.$nextTick(()=>{
+            this.$refs.summaryList.getDataList();
+          })
+        }
+      },
+      // 拖拽事件
+      dragControllerDiv(){
+        let resize = document.getElementById("resize");
+        let left = document.getElementById("left");
+        let right = document.getElementById("right");
+        let box = document.getElementById("box");
+
+        // 鼠标按下事件
+        resize.onmousedown = function (e) {
+          // 记录坐标起始位置
+          let startX = e.clientX;
+
+          // 左边元素起始宽度
+          resize.left = left.offsetWidth;
+          // console.log("宽度：", resize.left);
+          // 鼠标拖动事件
+          document.onmousemove = function (e) {
+            // 鼠标拖动的终止位置
+            let endX = e.clientX;
+
+            // （endx-startx）= 移动的距离
+            //  resize.left + 移动的距离 = 左边区域最后的宽度
+            let moveLen = resize.left + (endX - startX);
+            // console.log(moveLen);
+
+            // 左右两边区域的总宽度 = 大容器宽度 - 中间区域拖拉框的宽度
+            let maxWidth = box.clientWidth - resize.offsetWidth;
 
-    export default({
-        components: {
-            InterlockSummaryList
-        },
-        data () {
-            return {
-                selectData: {}
-            }
-        },
-        methods: {
-            selectEquipment(selectedKeys,e){
-                // console.log(99,selectedKeys,e)
-                if (selectedKeys.length == 0) {
-                    this.$nextTick(()=>{
-                        this.$refs.summaryList.searchReset();
-                    })
-                } else {
-                    let interlockType = e.selectedNodes[0].data.props.interlockType
-                    let pid = e.selectedNodes[0].data.props.pid
-                    // console.log(88,interlockType)
-                    this.selectData.interlockType = interlockType
-                    this.selectData.pid = pid
-                    this.selectData.id = e.selectedNodes[0].data.props.id
-                    this.$nextTick(()=>{
-                        this.$refs.summaryList.getDataList();
-                    })
-                }
-            }
-        },
-    })
+            // 限制左边区域的最小宽度为80px
+            if (moveLen < 80) moveLen = 80;
+
+            // 右边区域最小宽度为 150px 限制左边区域到150后不能再拉宽
+            if (moveLen > maxWidth - 420) moveLen = maxWidth - 420;
+
+            // 设置左边区域的宽度，通过换算为百分比的形式，实现窗体放大缩小自适应
+            // console.log((moveLen / maxWidth) * 100);
+            // left.style.width =(moveLen / maxWidth * 100) + '%';
+            left.style.width = moveLen + "px";
+
+            // 右边区域即是总大小 - 左边宽度 - 拖动条宽度
+            // console.log(((maxWidth - moveLen) / maxWidth) * 100);
+            right.style.width = maxWidth - moveLen + "px";
+            // console.log(moveLen);
+          };
+          // 鼠标松开事件
+          document.onmouseup = function (evt) {
+            // console.log(11);
+            document.onmousemove = null;
+            document.onmouseup = null;
+            resize.releaseCapture && resize.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
+          };
+          resize.setCapture && resize.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
+          return false;
+        };
+      },
+    },
+  })
 </script>
 
 <style scoped>
 .all{
-    height: calc(100vh - 183px);
-    width: 100%;
-    display: flex;
+  height: calc(100vh - 183px);
+  width: 100%;
+  display: flex;
 }
 .left{
-    height: 100%;
-    width: 20%;
-    /* border: 2px solid red; */
-    /* margin-right: 10px; */
-    margin-left: 5px;
+  height: 100%;
+  width: 20%;
+  /* border: 2px solid red; */
+  /* margin-right: 10px; */
+  margin-left: 5px;
+}
+/*拖拽区div样式*/
+.resize {
+  cursor: col-resize;
+  float: left;
+  position: relative;
+  top: 45%;
+  background-color: #d6d6d6;
+  border-radius: 5px;
+  margin-top: -10px;
+  width: 10px;
+  height: 50px;
+  background-size: cover;
+  background-position: center;
+  /*z-index: 99999;*/
+  font-size: 32px;
+  color: white;
+}
+/*拖拽区鼠标悬停样式*/
+.resize:hover {
+  color: #444444;
 }
+/* 右侧 */
 .right{
-    height: 100%;
-    width: 80%;
-    /* border: 2px solid red; */
+  height: 100%;
+  width: 80%;
+  /* border: 2px solid red; */
 }
 </style>