提交 4dbee911 编写于 作者: KK's avatar KK

首页菜单拖动

上级 ab36e529
...@@ -102,6 +102,18 @@ ...@@ -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:滚动条样式 ***/ /*** BRGIN:滚动条样式 ***/
::-webkit-scrollbar { ::-webkit-scrollbar {
background: transparent; background: transparent;
......
...@@ -9,8 +9,8 @@ ...@@ -9,8 +9,8 @@
<div class="index_view ${srffilepath2(view.getCodeName())}<#if view.getPSSysCss?? && view.getPSSysCss()??> ${view.getPSSysCss().getCssName()}</#if>"> <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> <app-studioaction :viewTitle="$t(model.srfCaption)" viewName="${view.getCodeName()?lower_case}"></app-studioaction>
<layout :class="themeClasses" :style="themeStyle"> <layout :class="themeClasses" :style="themeStyle">
<layout> <layout id="movebox">
<sider :width="collapseChange ? 64 : 200" hide-trigger v-model="collapseChange"> <sider class="index_sider" :width="collapseChange ? 64 : 200" hide-trigger v-model="collapseChange" id= "left_move">
<div class="sider-top"> <div class="sider-top">
<div class="page-logo"> <div class="page-logo">
<#if view.getAppIconPath() != ""> <#if view.getAppIconPath() != "">
...@@ -24,7 +24,8 @@ ...@@ -24,7 +24,8 @@
${P.getCtrlCode('appmenu', 'CONTROL.html').code} ${P.getCtrlCode('appmenu', 'CONTROL.html').code}
<context-menu-drag v-if="isEnableAppSwitch" :contextMenuDragVisiable="contextMenuDragVisiable"></context-menu-drag> <context-menu-drag v-if="isEnableAppSwitch" :contextMenuDragVisiable="contextMenuDragVisiable"></context-menu-drag>
</sider> </sider>
<layout> <div v-show="!collapseChange" id="move_axis"></div>
<layout id="right_move">
<header class="index_header"> <header class="index_header">
<div class="header-left" > <div class="header-left" >
<div class="page-logo"> <div class="page-logo">
......
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
this.viewState.next({ tag: 'appmenu', action: 'load', data: {} }); this.viewState.next({ tag: 'appmenu', action: 'load', data: {} });
this.$viewTool.setIndexParameters([{ pathName: '${view.getCodeName()?lower_case}', parameterName: '${view.getCodeName()?lower_case}' }]); this.$viewTool.setIndexParameters([{ pathName: '${view.getCodeName()?lower_case}', parameterName: '${view.getCodeName()?lower_case}' }]);
this.$viewTool.setIndexViewParam(this.context); this.$viewTool.setIndexViewParam(this.context);
this.mouse_move();
<#-- let loader:any = document.getElementById('app-loader'); <#-- let loader:any = document.getElementById('app-loader');
loader.parentNode.removeChild(loader); --> loader.parentNode.removeChild(loader); -->
</#assign> </#assign>
...@@ -213,6 +214,41 @@ ...@@ -213,6 +214,41 @@
return this.$route.fullPath; 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> <#ibizinclude>
../@MACRO/VIEW_BOTTOM-BASE.vue.ftl ../@MACRO/VIEW_BOTTOM-BASE.vue.ftl
</#ibizinclude> </#ibizinclude>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册