自由调整分割线

source/src/devtools/ui/index.vue

@@ -25,7 +25,7 @@
         <span>JS堆栈大小: {{ memory.performance.totalJSHeapSize }}</span>
         <span>JS堆栈使用: {{ memory.performance.usedJSHeapSize }}</span>
       </div>
-      <div class="left">
+      <div ref="left" class="left">
         <div class="tool-btn">
           <div style="padding-left: 15px;flex:1;">Node Tree</div>
           <el-button v-show="isShowRefreshBtn" type="success" class="el-icon-refresh"
@@ -66,7 +66,8 @@
           </el-tree>
         </div>
       </div>
-      <div class="right">
+      <ui-divider ref="divider" @move="onDividerMove"></ui-divider>
+      <div ref="right" class="right">
         <properties v-if="treeItemData" :data="treeItemData"></properties>
       </div>
     </div>
@@ -95,9 +96,11 @@ import {
 import Bus, {BusMsg} from "@/devtools/bus";
 import settingsVue from "./settings.vue"
 import {RefreshAuto, RefreshManual, settings} from "@/devtools/settings";
+import UiDivider from "@/devtools/ui/ui-divider.vue";
 
 @Component({
   components: {
+    UiDivider,
     properties,
     settingsVue,
   }
@@ -132,6 +135,19 @@ export default class Index extends Vue {
     this.showSettings = true;
   }
 
+  onDividerMove(event: MouseEvent) {
+    const leftDiv: HTMLDivElement = this.$refs.left as HTMLDivElement;
+    if (leftDiv) {
+      let width = leftDiv.clientWidth;
+      width += event.movementX;
+      if (width >= 300 && width < document.body.clientWidth - 100) {
+        leftDiv.style.width = `${width}px`;
+      }
+    }
+  }
+
+
+
   private syncSettings() {
     if (settings.data) {
       const {refreshType, refreshTime} = settings.data;
@@ -537,6 +553,7 @@ export default class Index extends Vue {
     .left {
       display: flex;
       flex-direction: column;
+      width: 300px;
 
       .tool-btn {
         display: flex;
@@ -560,7 +577,7 @@ export default class Index extends Vue {
         border-radius: 4px;
         min-height: 20px;
         overflow: auto;
-        width: 300px;
+        width: 100%;
 
         .leaf {
           width: 100%;

source/src/devtools/ui/ui-divider.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="ui-divider" :class="{'ui-divider-move':isMove}"
+       @mousedown="onDividerMouseDown">
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import Component from "vue-class-component";
+import {Prop, Emit} from "vue-property-decorator";
+
+@Component({
+  name: "ui-divider",
+  components: {}
+})
+export default class UiDivider extends Vue {
+  private isMove = false;
+
+  created() {
+  }
+
+  mounted() {
+  }
+
+  @Emit("move")
+  onDividerMove(event: MouseEvent) {
+    return event;
+  }
+
+  onDividerMouseDown(event: MouseEvent) {
+    this.isMove = true;
+    document.addEventListener("mousemove", this.onDividerMove);
+
+    const self = this;
+
+    function onMouseUp() {
+      self.isMove = false;
+      document.removeEventListener("mouseup", onMouseUp);
+      document.removeEventListener("mousemove", self.onDividerMove);
+    }
+
+    document.addEventListener("mouseup", onMouseUp)
+  }
+}
+</script>
+
+<style scoped lang="less">
+.ui-divider {
+  width: 3px;
+  height: 100%;
+  cursor: ew-resize;
+  background-color: grey;
+}
+
+.ui-divider-move {
+  background-color: #eaa530;
+}
+</style>