首页菜单拖动

@CONTROL/视图布局面板/应用首页视图/VIEW.less.ftl

@@ -102,6 +102,18 @@
     }
 }
 
+#move_axis{
+    width: 5px;
+    height: 100%;
+    cursor: w-resize;
+    float: left;
+}
+.index_sider{
+    flex: none!important;
+    max-width: none !important;
+    transition: none 0s ease 0s;
+}
+
 /***    BRGIN:滚动条样式    ***/
 ::-webkit-scrollbar {
     background: transparent;

@CONTROL/视图布局面板/应用首页视图/VIEW.vue.ftl

@@ -9,8 +9,8 @@
 <div class="index_view ${srffilepath2(view.getCodeName())}<#if view.getPSSysCss?? && view.getPSSysCss()??> ${view.getPSSysCss().getCssName()}</#if>">
     <app-studioaction :viewTitle="$t(model.srfCaption)" viewName="${view.getCodeName()?lower_case}"></app-studioaction>
     <layout :class="themeClasses" :style="themeStyle">
-        <layout>
-            <sider :width="collapseChange ? 64 : 200" hide-trigger v-model="collapseChange">
+        <layout id="movebox">
+            <sider class="index_sider" :width="collapseChange ? 64 : 200" hide-trigger v-model="collapseChange" id= "left_move">
                 <div class="sider-top">
                     <div class="page-logo">
                     <#if view.getAppIconPath() != "">
@@ -24,7 +24,8 @@
                 ${P.getCtrlCode('appmenu', 'CONTROL.html').code}
                 <context-menu-drag v-if="isEnableAppSwitch" :contextMenuDragVisiable="contextMenuDragVisiable"></context-menu-drag>
             </sider>
-            <layout>
+            <div v-show="!collapseChange"  id="move_axis"></div>
+            <layout id="right_move">
                 <header class="index_header">
                     <div class="header-left" >
                         <div class="page-logo">

@VIEW/应用首页视图/VIEW-BASE.vue.ftl

@@ -10,6 +10,7 @@
         this.viewState.next({ tag: 'appmenu', action: 'load', data: {} });
         this.$viewTool.setIndexParameters([{ pathName: '${view.getCodeName()?lower_case}', parameterName: '${view.getCodeName()?lower_case}' }]);
         this.$viewTool.setIndexViewParam(this.context);
+        this.mouse_move();
         <#--  let loader:any = document.getElementById('app-loader');
         loader.parentNode.removeChild(loader);  -->
 </#assign>
@@ -213,6 +214,41 @@
         return this.$route.fullPath;
     }
 
+    /**
+     * 鼠标拖动事件
+     *
+     * @param {*} val
+     * @returns {*}
+     * @memberof ${srfclassname('${view.name}')}Base
+     */
+    public mouse_move(){
+        let move_axis:any = document.getElementById("move_axis");
+        let left_move :any= document.getElementById("left_move");
+        let right_move :any= document.getElementById("right_move");
+        let movebox :any= document.getElementById("movebox");
+        move_axis.onmousedown = (e:any) =>{
+            let startX = e.clientX;
+            move_axis.left = move_axis.offsetLeft;
+            document.onmousemove =  (e:any) =>{
+                let endX = e.clientX; 
+                let moveLen = move_axis.left + (endX - startX);
+                let maxT = movebox.clientWidth - move_axis.offsetWidth;
+                if (moveLen < 150) moveLen = 150;
+                if (moveLen > maxT - 150) moveLen = maxT - 150; 
+                move_axis.style.left = moveLen;
+                left_move.style.width = moveLen + "px";
+                right_move.style.width = (movebox.clientWidth - moveLen - 5) + "px";
+            }
+            document.onmouseup = (evt) =>{
+                document.onmousemove = null;
+                document.onmouseup = null;
+                move_axis.releaseCapture && move_axis.releaseCapture();
+            }
+            move_axis.setCapture && move_axis.setCapture();
+            return false;
+        }
+    }
+
 <#ibizinclude>
 ../@MACRO/VIEW_BOTTOM-BASE.vue.ftl
 </#ibizinclude>