From 0163e8673e057be9129db7bee631a61768755716 Mon Sep 17 00:00:00 2001
From: Guan <43517950+chenfanghang@users.noreply.github.com>
Date: Mon, 28 Dec 2020 13:54:52 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95=E5=88=97=E8=A1=A8=E5=AE=BD?=
 =?UTF-8?q?=E5=BA=A6=E6=94=B9=E4=B8=BA=E5=8F=AF=E6=8B=96=E6=8B=BD=20(#914)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/test/components/ApiScenarioConfig.vue | 31 +++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/frontend/src/business/components/api/test/components/ApiScenarioConfig.vue b/frontend/src/business/components/api/test/components/ApiScenarioConfig.vue
index cff3eefaa8..604410b7c8 100644
--- a/frontend/src/business/components/api/test/components/ApiScenarioConfig.vue
+++ b/frontend/src/business/components/api/test/components/ApiScenarioConfig.vue
@@ -1,6 +1,6 @@
 <template>
   <el-container>
-    <el-aside class="scenario-aside">
+    <el-aside class="scenario-aside" id="silderLeft">
       <div class="scenario-list">
         <ms-api-collapse v-model="activeName" @change="handleChange">
           <draggable :list="scenarios" group="Scenario" class="scenario-draggable" ghost-class="scenario-ghost">
@@ -50,6 +50,7 @@
         <el-button slot="reference" :disabled="isReadOnly" class="scenario-create" type="primary" size="mini"
                    icon="el-icon-plus" plain/>
       </el-popover>
+      <div class="moveBtn" v-move></div>
     </el-aside>
 
     <el-main class="scenario-main">
@@ -111,7 +112,23 @@ export default {
       currentScenario: {}
     }
   },
-
+  directives: {
+    move(el, bindings) {
+      el.onmousedown = function (e) {
+        const init = e.clientX;
+        const parent = document.getElementById("silderLeft");
+        const initWidth = parent.offsetWidth;
+        document.onmousemove = function (e) {
+          const end = e.clientX;
+          const newWidth = end - init + initWidth;
+          parent.style.width = newWidth + "px";
+        };
+        document.onmouseup = function () {
+          document.onmousemove = document.onmouseup = null;
+        };
+      };
+    }
+  },
   watch: {
     test() {
       this.initScenarioEnvironment();
@@ -337,4 +354,14 @@ export default {
   border-right: 2px solid #909399;
   color: #8a8b8d;
 }
+
+.moveBtn{
+  height: 100%;
+  width: 2px;
+  position: absolute;
+  right: 0px;
+  top: 0;
+  cursor: col-resize;
+  background-color: #DCDFE6;
+}
 </style>