全局左右拖拽组件

frontend/src/business/components/api/test/components/ApiScenarioConfig.vue

@@ -1,6 +1,6 @@
 <template>
   <el-container>
-    <el-aside class="scenario-aside" id="silderLeft">
+    <el-aside class="scenario-aside">
       <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,7 +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>
+      <ms-horizontal-drag-bar/>
     </el-aside>
 
     <el-main class="scenario-main">
@@ -77,11 +77,13 @@ import {Request, Scenario} from "../model/ScenarioModel";
 import draggable from 'vuedraggable';
 import MsApiScenarioSelect from "@/business/components/api/test/components/ApiScenarioSelect";
 import {parseEnvironment} from "../model/EnvironmentModel";
+import MsHorizontalDragBar from "../../../common/components/MsHorizontalDragBar";
 
 export default {
   name: "MsApiScenarioConfig",
 
   components: {
+    MsHorizontalDragBar,
     MsApiScenarioSelect,
     MsApiRequestConfig,
     MsApiScenarioForm,
@@ -112,23 +114,6 @@ 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();
@@ -355,13 +340,4 @@ export default {
   color: #8a8b8d;
 }
 
-.moveBtn{
-  height: 100%;
-  width: 2px;
-  position: absolute;
-  right: 0px;
-  top: 0;
-  cursor: col-resize;
-  background-color: #DCDFE6;
-}
 </style>

frontend/src/business/components/common/components/MsAsideContainer.vue

@@ -1,17 +1,20 @@
 <template>
   <el-aside :width="width" class="ms-aside-container"
             :style="{'margin-left': !asideHidden ? 0 : '-' + width}">
-    <div v-if="enableAsideHidden" class="hiddenBottom" @click="asideHidden = !asideHidden" :style="{'left': asideHidden ? 0 : width}">
-      <i v-if="!asideHidden" class="el-icon-arrow-left"/>
-      <i v-if="asideHidden" class="el-icon-arrow-right"/>
-    </div>
+    <!--<div v-if="enableAsideHidden" class="hiddenBottom" @click="asideHidden = !asideHidden">-->
+      <!--<i v-if="!asideHidden" class="el-icon-arrow-left"/>-->
+      <!--<i v-if="asideHidden" class="el-icon-arrow-right"/>-->
+    <!--</div>-->
     <slot></slot>
+    <ms-horizontal-drag-bar/>
   </el-aside>
 </template>
 
 <script>
+    import MsHorizontalDragBar from "./MsHorizontalDragBar";
     export default {
       name: "MsAsideContainer",
+      components: {MsHorizontalDragBar},
       props: {
         width: {
           type: String,
@@ -39,12 +42,16 @@
     box-sizing: border-box;
     background-color: #FFF;
     height: calc(100vh - 80px);
+    border-right: 0px;
+    position: relative;
   }
 
   .hiddenBottom {
     width: 8px;
     height: 50px;
     top: calc((100vh - 80px)/3);
+    right: -10px;
+    /*top: 0;*/
     line-height: 50px;
     border-radius: 0 15px 15px 0;
     background-color: #acb7c1;

frontend/src/business/components/common/components/MsHorizontalDragBar.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="drag-bar" v-horizontal-drag/>
+</template>
+
+<script>
+    export default {
+        name: "MsHorizontalDragBar"
+    }
+</script>
+
+<style scoped>
+
+  .drag-bar {
+    height: 100%;
+    width: 1px;
+    position: absolute;
+    right: 0px;
+    top: 0;
+    cursor: col-resize;
+    background-color: #E6E6E6;
+    border: 0px;
+  }
+
+  .drag-bar:hover {
+    width: 3px;
+  }
+
+</style>

frontend/src/business/main.js

@@ -18,6 +18,7 @@ import '../common/css/menu-header.css';
 import '../common/css/main.css';
 import CKEditor from '@ckeditor/ckeditor5-vue';
 import VueFab from 'vue-float-action-button'
+import {horizontalDrag} from "../common/js/directive";
 
 Vue.config.productionTip = false;
 Vue.use(icon);
@@ -43,6 +44,9 @@ Vue.directive('xpack', xpack);
 
 Vue.directive('tester', tester);
 
+//支持左右拖拽
+Vue.directive('horizontal-drag', horizontalDrag);
+
 new Vue({
   el: '#app',
   router,

frontend/src/common/js/directive.js

@@ -0,0 +1,17 @@
+export const horizontalDrag = {
+  inserted(el, binding) {
+    el.onmousedown = function (e) {
+      const init = e.clientX;
+      const parent = el.parentNode;
+      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;
+      };
+    };
+  }
+};